View not refreshing after Ajax call

Question

I am submitting a form of data via an Ajax call (I think?) to my controller to process. Once the row is saved, I am hoping to redirect to the original HttpGet action in my controller that initially loaded the form.

What I am finding is that the ajax call works, the controller action fires, and the data is saved to the database. However, the screen never refreshes after the View is reloaded.

I have a breakpoint on the 'return View(model)' on the action in my controller, which fires - but the screen doesn't refresh. If I use firebug and look at the html, I see the new row should display in my view. But, the screen doesn't seem to reload at all.

My Javascript:

<script type="text/javascript">
        $(document).ready(function () {
            $('.btnSubmitNewCard').click(function () {
            var data = { cardNumber: $('.txtNewCardNumber').val(), cardHolder: $('.txtNewCardHolder').val(), expiryMonth: $('.txtNewExpiryMonth').val(), expiryYear: $('.txtNewExpiryYear').val(), active: $('.txtNewActive').val(), accountId: $('.Id').val() };

                $.ajax({
                    url: '@Url.Action("SaveBankCard", "BankAccount")',
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    cache: false,
                    async: true,
                    success: function (result) {
                        console.log(result.toString());
                        if (result.Success == 'true') {
                            alert('Redirecting...');
                            window.location = '@Url.Action("EditBankAccount", "BankAccount", new {accountId = Model.Id})';
                        } 
                    },
                    error: function () {
                        alert("Oh no");
                    }

                });
            });
        });
    </script>

The controller method called by the javascript above (Successfully):

public ActionResult SaveBankCard(string cardNumber, string cardHolder, int expiryMonth, int expiryYear, string active, int accountId)
{
    var card = new AccountCardDto
        {
            Id = 0,
            AccountId = accountId,
            Active = active == "on",
            CardHolderName = cardHolder,
            CardNumber = cardNumber,
            ExpiryDate = new DateTime(2000 + expiryYear, expiryMonth, 1)
        };

    int id = new BankAccountService().SaveCard(card);
    return RedirectToAction("EditBankAccount", new { bankAccountId = accountId });

}

And then the Controller Action that gets called from the 'RedirectToAction' call:

       [HttpGet]
        [Authorize]
        [OutputCache(Location = System.Web.UI.OutputCacheLocation.None)]
        public ActionResult EditBankAccount(int? bankAccountId)
        {
            var model = new BankAccountModel();

            if (bankAccountId != null)
            {
....
            }


            return View(model);
}

That last line, 'return View(model)' does get called. If I check the 'model', I see the new row that was persisted to the database. But, as I say, the screen doesn't refresh.

Can anyone tell me why, and how I can fix/improve my situation?

Answer 1

Try this...your method SaveBankCard calling EditBankAccount in controller and ajax also then do one thing call it only in ajax or in controller

<script type="text/javascript">
        $(document).ready(function () {
            $('.btnSubmitNewCard').click(function () {
            var data = { cardNumber: $('.txtNewCardNumber').val(), cardHolder: $('.txtNewCardHolder').val(), expiryMonth: $('.txtNewExpiryMonth').val(), expiryYear: $('.txtNewExpiryYear').val(), active: $('.txtNewActive').val(), accountId: $('.Id').val() };

                $.ajax({
                    url: '@Url.Action("SaveBankCard", "BankAccount")',
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    cache: false,
                    async: true,
                    success: function (result) {
                        console.log(result.toString());
                        if (result != 0) **//if your method return int else check it null if your method return string**
                        {
                            alert('Redirecting...');
                            window.location = '@Url.Action("EditBankAccount", "BankAccount", new {bankAccountId= Model.Id})'; **//change name of parameters**
                        } 
                    },
                    error: function () {
                        alert("Oh no");
                    }

                });
            });
        });
    </script>

Controller

public int SaveBankCard(string cardNumber, string cardHolder, int expiryMonth, int expiryYear, string active, int accountId)
{
    var card = new AccountCardDto
        {
            Id = 0,
            AccountId = accountId,
            Active = active == "on",
            CardHolderName = cardHolder,
            CardNumber = cardNumber,
            ExpiryDate = new DateTime(2000 + expiryYear, expiryMonth, 1)
        };

    int id = new BankAccountService().SaveCard(card);
    int bankAccountId = accountId;
    return bankAccountId ;

}