javascript - update div with Ajax MVC4 -
i can't seem understand how update div of items after category selected. i've got far , confused. how values view controller make query?
//get <li> clicked , display items in category $(document).ready(function() { $('#test li').click(function() { var selector = "input[name='" + $(this).id + "value']"; var catid = $(selector).val(); $.ajax({ url: "...", type: "get", data: {//return item info}, success: function(data) { //update div contents here? } }); }); });
partial updated upon category clicked
@foreach (var item in model) { <ul> <li>@item.item_name</li> <li><input type="hidden" class="item_id" value="@item.id" /></li> </ul> }
controller
public actionresult partialtwo( int id)//how pass category id? { var query = d in db.items d.catid==id orderby d.dateadded select d; var results = query; return partialview("_fullinfopartial", results); //returns items in clicked category }
instead of 2 li
<li>@item.item_name</li> <li><input type="hidden" class="item_id" value="@item.id" /></li>
you can use 1 in order decrease dom size if not required
<li data-id="@item.id">@item.item_name</li>
and can partial view result $.get easily
$("#test li").on("click",function(){ var requestpage = "/partialtwo?id=" + $(this).data("id"); $.get(requestpage, function(result){ $("#content").html(result); // want put result }); });
Comments
Post a Comment