为什么我的简单Ajax调用不按我的意思工作？

Question

我有一个非常简单的主页，如下所示：

 <h2>---Select your RuleType---</h2>

@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules" }))
{
    @Html.DropDownListFor(x => x._SelectedItemId, Model._Items)
    <input type="submit" value="Load Rules" /> 
        <br />
}

<div id="Rules">
    @foreach (var rule in Model._Ruleset)
 {
     <tr>
        <div>test2</div>
        @Html.Partial("Rules", rule)
        </tr>
 }
</div>

这是一个包含多个选项的下拉菜单，当选择其中一个选项并按下按钮时，它会通过ajax在我的控制器中调用此方法：

[HttpPost]
public ActionResult LoadRules(RulesetModel model)
{
    model.LoadRules();
    return View(model);
}

我正在返回模型，以便id =＆＃34;规则＆＃34;可以更新，如代码中所示，我的ajax已将其UpdateTargetID设置为该div。在那个forloop中，我想为模型中的每个规则添加几个部分视图。

我检查了我的代码并且返回的模型正确加载规则并且数组不为空。但是当我加载时屏幕上没有任何内容。

我到处寻找类似的问题，但无法找到适合我的好解决方案。我对asp mvc很新，所以我只是错过了一些非常明显的东西吗？

Answer 1

你可以这样做

1）为命名为＆＃34;规则＆＃34;

添加另一个部分视图

<div id="Rules">
    @foreach (var rule in Model._Ruleset)
 {
     <tr>
        <div>test2</div>
        @Html.Partial("Rules", rule)
        </tr>
 }
</div>

2）从动作方法＆＃34; LoadRules＆＃34;将模型返回到＆＃34;规则＆＃34;局部视图

[HttpPost]
public ActionResult LoadRules(RulesetModel model)
{
    model.LoadRules();
    return View(model);
}


public ActionResult LoadRules(RulesetModel model)
{
 model.LoadRules();
 return PartialView("rules", model);
}

Answer 2

尝试使用局部视图。 如果您发现任何问题，请告诉我

Answer 3

假设您有一个控制器来服务Ajax页面，如下所示 -

public ActionResult Ajax()
{
    DDLModel model = new DDLModel();
    model._Items = new List<SelectListItem>();
    model._Items.Add(new SelectListItem() { Text = "One", Value = "1" });
    model._Items.Add(new SelectListItem() { Text = "Two", Value = "2" });

    return View(model);
}

模型如下 -

public class DDLModel
{
    public List<SelectListItem> _Items { get; set; }
    public string _SelectedItemId { get; set; }

    public List<RuleSetModel> rules { get; set; }
}

public class RuleSetModel
{
    public string Name { get; set; }
}

加载View -

@model Rami.Vemula.Dev.Mvc.Controllers.DDLModel
@{
    ViewBag.Title = "Ajax";
}

<h2>Ajax</h2>

<h2>---Select your RuleType---</h2>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules" }))
{
    @Html.DropDownListFor(x => x._SelectedItemId, Model._Items)
    <input type="submit" value="Load Rules" />
    <br />
}

<div id="Rules">
</div>

当点击提交按钮时，它将点击以下控制器操作 -

public ActionResult LoadRules(DDLModel model)
{
    model.rules = new List<RuleSetModel>();
    model.rules.Add(new RuleSetModel() { Name = "Rami"});
    model.rules.Add(new RuleSetModel() { Name = "Ramilu" });

    return PartialView("MyPartial", model);
}

结果将返回以下部分视图 -

@model Rami.Vemula.Dev.Mvc.Controllers.DDLModel

@{
    foreach (var item in Model.rules)
    {
        <div>
            @item.Name
    </div>
    }
}

当我们执行代码时，我们得到以下视图 -