javascript - 使用 Ajax MVC4 更新 div

Question

选择类别后，我似乎无法理解如何更新项目的 div。我已经走了这么远，现在很困惑。如何将视图中的值获取到控制器中以进行查询？

 //get <li> clicked and display the items in that 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 all the item info},
        success: function(data) {
            //update div contents here?

        }
    });
});
});

部分将根据单击的类别进行更新

@foreach (var item in Model)
 {

    <ul>

        <li>@item.item_name</li>
        <li><input type="hidden" class="item_id" value="@item.ID" /></li>

    </ul>

 }

控制器

public ActionResult PartialTwo( int id)//how to pass category id?
    {

        var query = from d in db.Items
                    where d.catId==id
                    orderby d.dateAdded
                    select d;
        var results = query;


        return PartialView("_FullInfoPartial", results);
        //returns items in the clicked category  

    }

Answer 1

instead of two li

<li>@item.item_name</li>
<li><input type="hidden" class="item_id" value="@item.ID" /></li>

you can just use one in order to decrease dom size if it is not required

<li data-id="@item.ID">@item.item_name</li>

and you can get the partial view result with $.get easily

$("#test li").on("click",function(){

    var requestPage = "/PartialTwo?id=" + $(this).data("id");
    $.get(requestPage, function(result){
        $("#content").html(result); // where you want to put the result
    });
});

Answer 2

我在这里回答了一个非常相似的问题，尽管该示例使用的是 PHP。然而，基本思想是相同的。您的 MVC4 将返回一些将转换为 HTML 的数据类型（最简单的方法是直接返回 HTML），然后您将此 HTML 值附加到 DOM 元素（在这种情况下，是您选择的 div 项）。

JQuery 看起来也很相似：

var request = $.ajax({
      type: "POST",
      url: "example.php",
      data: data_obj,
      dataType: "html"
   }).done(function(msg) {
         $("#example_element").append(msg);
      }

尝试在返回动态内容时加载“div”

Answer 3

使用Ajax.BeginForm如下，

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "youDivId" }))

使用上述方法并使您的控制器返回Patial View将使用partial view result.