Question

我有一个视图，在不改变整体视图的情况下更改内容，（更改视图的一部分）这是我的代码：

型号：

public class DisplayData
{
    public int ID { get; set; }
    public DisplayData(int ID)
    {
        this.ID = ID;
    }
}

控制器：

    public ActionResult PartialDemo(string Data)
    {
        List<DisplayData> Display = new List<DisplayData>();

        if (Request.IsAjaxRequest())
        {
            if (Data == "1")
            {
                Display.Add(new DisplayData(3));
                Display.Add(new DisplayData(4));
            }
            else
            {
                Display.Add(new DisplayData(5));
                Display.Add(new DisplayData(6));
            }
            return PartialView("PartialDemoUC", Display);
        }
        else
        {
            Display.Add(new DisplayData(1));
            Display.Add(new DisplayData(2));
            return View("PartialDemo", Display);
        }
     }

PartialDemoUC.cshtml

 @model IEnumerable<dynamic>

 @foreach(var items in Model)
 {
     @items.ID    
 }

PartialDemo.cshtml：

  @model IEnumerable<AppTwitter.Models.DisplayData>
  @{
      ViewBag.Title = "PartialDemo";
   }

   <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"> </script>
    @Ajax.ActionLink("**Link_1**", "PartialDemo", "PartialDemo", new {Data= "1" }, new   AjaxOptions { UpdateTargetId = "rsvpmsg" })
    @Ajax.ActionLink("**Link_2**", "PartialDemo", "PartialDemo", new {Data= "2" }, new   AjaxOptions { UpdateTargetId = "rsvpmsg" })

    <div id="rsvpmsg">
    @{ Html.RenderPartial("PartialDemoUC", this.Model);}
    </div>

如果选中Link_1，我会将Link_2和checkbox:更改为chechbox，就像点击链接一样我怎么能这样做？

我很抱歉我的英语不好。

Answer 1

您可以使用标准复选框：

@model IEnumerable<AppTwitter.Models.DisplayData>
@{
    ViewBag.Title = "PartialDemo";
}

<div data-url="@Url.Action("PartialDemo", "PartialDemo")" id="checkboxes">
    @Html.CheckBox("Data1", new { data_value = "1" })
    @Html.CheckBox("Data2", new { data_value = "2" })
</div>

<div id="rsvpmsg">
    @{Html.RenderPartial("PartialDemoUC", this.Model);}
</div>

然后在一个单独的javascript文件（您需要引用）中订阅这些复选框的.change()事件并触发AJAX请求：

$(function () {
    $('#checkboxes :checkbox').change(function () {
        var value = $(this).data('value');
        var isChecked = $(this).is(':checked');
        var url = $('#checkboxes').data('url');
        $.ajax({
            url: url,
            type: 'POST',
            data: { data: value, isChecked: isChecked },
            success: function (result) {
                $('#rsvpmsg').html(result);
            }
        });
    });
});

现在你的控制器动作可以带2个参数，这样你除了知道点击了哪个复选框，它的值是被选中还是未被选中之外，因为与链接相反，复选框可以有两种可能的状态：

public ActionResult PartialDemo(string data, bool isChecked)
{
    ...
}

哦，如果你不再使用jquery.unobtrusive-ajax.min.js助手，你不再需要Ajax.*脚本。

选中复选框后更改视图

1 个答案: