RedirectToAction after ajax form submit in Asp.net Core

user_8877860 0
Viewed 2589

I have a view named Index and a PartialView named '_Addbook' that shown as a bootstrap modal. In the partialView insert data into database using ajax form.

Index view :

<div class="panel panel-primary">
<div class="panel-body">
    <div class="btn-group">
        <a class="btn btn-primary marginbutoon" id="showBookgroup" data-toggle="modal" asp-action="AddBook"
           data-target="#modal-book">
            <i class="glyphicon glyphicon-plus"></i>
            Add Book
        </a>
    </div>
</div>

Partialview :

 @model WebApplication1.Models.Book
<form asp-controller="Home" asp-action="AddBook" id="myform"
  data-ajax="true" data-ajax-method="POST"
  data-ajax-mode="replace" data-ajax-update="#myform">



        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Add Book</h4>
        </div>


        <div class="modal-body form-horizontal">
            <div class="row">
                <div class="form-group">
                    <label asp-for="BookName" class="col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <input asp-for="BookName" class="form-control" />
                        <span asp-validation-for="BookName" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="Submit" />
        </div>

Controller :

 [HttpGet]
    public IActionResult AddBook()
    {
        var book = new Book();
        return PartialView("_AddBooks", book);
    }



    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult AddBook(Book model)
    {
        if (ModelState.IsValid)
        {
            using (var db = _Context.GetRequiredService<ApplicationDbContext>())
            {
                db.bookgroups.Add(model);
                db.SaveChanges();
            }
            return RedirectToAction("Index");
        }
        else
        {
            return PartialView("_Addbooks", model);
        }
    }

The data is stored correctly in the database and modal hide after submit but index view shows Mixed up. How can i Redirect after ajax submit?

asp.net-core-mvc razor c#
2 Answers

Your current form is setup to do ajax form post. So when the response is received from the server, it will replace the inner html of the form tag. So with your current code, it will basically makes a GET call to the Index action and the response of that will be loaded to the form tag.

If you want to do a redirect, but still want to have the model validation works, You may return a view result back, which has some javascript code which does the redirection.

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult AddBook(Book model)
{
    if (ModelState.IsValid)
    {
        //Your code to store data     
        return PartialView("_AddedSuccessfully");
    }
    return PartialView("_AddBooks", model);
}

And in the _AddedSuccessfully.cshtml partial view will have only the below content, which is the javascript for redirect to /Home/Index

<script>
    window.location.href = '@Url.Action("Index","Home")';
</script>

EDIT : As per the comment

how can i make it dynamically. because i have several partial view in my project and i want pass ControllerName and ActionName as a parameters to _AddedSuccessfully.cshtml?

You can pass it from your view to the action method and from there to the partial view

Just add a hidden input element to the Add form, just above your submit button and use Url.Action helper method to generate the url you want to redirect to, after saving successfully.

<input type="hidden" name="redirectUrl" value="@Url.Action("Index","Home")" />
<input type="submit" class="btn btn-primary" value="Submit"/>

Now, add a new parameter to your action method with the same name as the hidden input. Pass that string value as the model of the view when you call the PartialView method for _AddedSuccessfully view.

[HttpPost]
public IActionResult AddBook(Book model,string redirectUrl)
{
    if (ModelState.IsValid)
    {
        // to do : Save   
        return PartialView("_AddedSuccessfully", redirectUrl);
    }
    return PartialView("_AddBook", model);
}

Now you need to udpate the partial view to be strongly typed to string and use the model of the view for redirect.

@model string
<script>
    window.location.href = '@Model';
</script>
user_405210

You can use FormHelper to create ajax forms, ajax redirects, showing notifications and to do many things on ASP.NET Core. Also, FormHelper helps you to transform server-side validations to client-side.

It's so easy to use. You just need to add asp-formhelper="true" to your form tag.

<form asp-formhelper="true" asp-controller="Home" asp-action="Save">
   // <input...
   // ...
</form>

You can check it's documentation on FormHelper GitHub Page. And you can download that package from Nuget.

user_61400550
Related