Loading

How to load partial page in the same page using button in asp.net mvc

How to load partial page in the same page using button in asp.net mvc

mohaammed talha

5y687Learn iOS Programming

I want to load partial page in the same page using button in asp.net mvc

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
step1. Create one method which returns partial view as
public ActionResult GetProductByCategory(string Id)
{
    int id = Convert.ToInt32(Id);
    List products = LoadProducts().Where(x => x.CategoryId == id).ToList();
    return PartialView("_ProductPartial", products);

}
Step 2. Design the partial view (_ProductPartial in Shared folder)
@using MVCExample.Models
@model IEnumerable











@foreach (var item in Model)
{










    }
Id Name Price
@item.Id @item.Name @item.Price
step 3. on your main view on button click call this partial view as
$(".btnView").click(function () {

     var CategoryId = $(this).attr("data-id");
     $.ajax({
         type: "post",
         url: "/Home/GetProductByCategory",
         dataType: "html",
         data: { Id: CategoryId },
         cache: false,
         success: function (res) {
             debugger;
             $("#productArea").html(res);
         }
     });
});
Note:- productArea is a div in your main view.

for more visit my article on this
https://www.sharpencode.com/article/MVC/partial-views
+2