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

Question

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

Sachin Singh · 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 Id Name Price @foreach ( var item in Model) { @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

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

Answers (1)