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

而不是两个 li

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

如果不需要，你可以使用一个来减少dom大小

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

您可以轻松获得 $。get 的部分视图结果

$("#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项）。 / p>

JQuery看起来也很相似：

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

Attempting to load a "div" as dynamic content is returned

Answer 3

使用Ajax.BeginForm，如下所示，

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

使用上述内容并让控制器返回Patial View将使用partial view result更新您的div。

使用Ajax MVC4更新div

3 个答案: