Asp.net MVC Post Data To Controller without refreshing page

Question

I am posting a selected value from Dropdown List. but after getting my value page goes refresh. How to post data without page refresh to controller?

Here is view:

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            using (Html.BeginForm("AddToCart", "Test", new { id = item.ProductId }, FormMethod.Post))
            {


                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img id="ImageClick" onclick="location.href='@Url.Action("ViewProductOnClick", "Home", new { id = item.ProductId })'"
                         src="@Url.Content("~/Content/" + item.ImageURL)" height="200" width="200" alt="@item.ProductName" />
                    <div class="productDetails">
                        <div class="productName">
                            <h5 id="ProductName" class="bold name">Name: @item.ProductName</h5>
                        </div>

                        <div class="productPrice bold" id="ProductPrice">
                            Rs. <span class="unit"> @item.Price</span>
                        </div>
                        <div class="productCart">


                            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 no-padding">
                                <input type="submit" class="btn btn-success" id="btnSubmit" value="Add to Cart" />
                            </div>

                        </div>
                    </div>

                </div>
            }
        }

    </div>
</div>

Here is my controller:

    [HttpPost]
    public ActionResult AddToCart(int id, FormCollection collection)
    {
        MyDBContext myDBContext = new MyDBContext();

        if (ModelState.IsValid)
        {
            var cartFill = myDBContext.Products.Find(id);

            int quantity = Convert.ToInt16(collection["Weight"]);

            AddToCart addToCart = new AddToCart(cartFill, quantity);

            if (Session["cart"] == null)
            {
                List<AddToCart> list = new List<AddToCart>();
                list.Add(addToCart);
                Session["cart"] = list;
            }
            else
            {
                List<AddToCart> list = (List<AddToCart>)Session["cart"];
                list.Add(addToCart);
                Session["cart"] = list;
            }
        }
        return RedirectToAction("ViewCart", "Home");
    }

score 1 · Answer 1 · answered Nov 15 '18 at 13:42

You can do it like this;

1) You have to create partial view for your action (Action is you want to post)

2) Add Reference of jquery.unobtrusive-ajax.

Using NuGet package manager, you can install library and reference into the project. here is the package link https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

3)To work Ajax.BeginForm functionality properly don't forget to add the reference into page

After you do these, you can post data to controller without Page refresh in ASP.NET MVC using Ajax.BeginForm.

For detailed explanation you can read this link: post-data-without-whole-postback

score 0 · Answer 2 · answered Nov 15 '18 at 12:54

0

You should use a partial view if you want to update only portions of the page instead of refreshing it.

Here is a useful link to start with: http://www.tutorialsteacher.com/mvc/partial-view-in-asp.net-mvc.

answered Nov 15 '18 at 12:54

George Findulov

769
6
16

Asp.net MVC Post Data To Controller without refreshing page

2 Answers2