mvc ajax.beginform 不适用于局部视图答案

【问题标题】：mvc ajax.beginform not working with partialviewmvc ajax.beginform 不适用于局部视图
【发布时间】：2013-02-23 19:02:14
【问题描述】：

我一直在尝试让级联下拉菜单在 asp.net mvc4 中工作......现在我从 ajax.beginform 开始......稍后我可能会直接使用 jquery......

我的问题是第一个（轨道）ajax.beginform 被调用，它调用控制器，然后它指向第二个部分（轨道）......但是当 SelectRailPartial.cshtml 渲染时它会这样做一个完整的视图。 ..它不是用 div 标记作为替代的渲染..我已经尝试了 ajaxControls 中的各种值来指定替换等...它们似乎没有什么不同...

我怀疑我的问题可能出在我所包含的 javascripts 中....我已将其全部剥离为一些我知道我需要保持简单...。谁能发现我做错了什么？请……

在我的（移动）控制器中，我有以下两种方法：

 //this is my main form that I am looking at...
    public ActionResult LoadRailVehicle()
    {
        LoadRailVehicleInputModel model = new LoadRailVehicleInputModel();
        IRailService railService = new RailService();
        model.TrackList = railService.GetActiveRailTracks().ToList();
        return View(model);
    }


    [HttpPost]
    public ActionResult SelectTrack(string selectedTrack)
    {
        LoadRailVehicleInputModel model = new LoadRailVehicleInputModel();
        //kludge for now...
        model.RailCarList.Add("aaaa");         
        return PartialView("xSelectRailPartial", model);
    }

我的 LoadRailVehicle.cshtml

@using TBS.Etracs.Web.Main.Areas.Carrier.Models
@model LoadRailVehicleInputModel

@{
    ViewBag.Title = "Load Rail Vehicle";
}

<scripts>   
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"                    type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"                type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.intellisense.js")"       type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</scripts>

<table border="0">
    <tr>
        <td>Track</td>
        <td> :   </td>
        <td><div id="trackdiv">@Html.Partial("xSelectTrackPartial", Model)</div></td>
    </tr>
    <tr>
        <td>Rail</td>
        <td> :  </td>
        <td><div id="Raildiv">@Html.Partial("xSelectRailPartial", Model)</div></td>
    </tr>
</table>

在 xSelectTrackPartial.cshtml 中：

@using TBS.Etracs.Web.Main.Areas.Carrier.Models
@model LoadRailVehicleInputModel

<scripts>
    <script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</scripts>

@using (Ajax.BeginForm("SelectTrack", "Mobile",
                    new AjaxOptions
                    {  UpdateTargetId   = "Raildiv" 
                                @* This is a control in theLoadRailVehicle.cshtml *@
                      }))
{
    @Html.DropDownListFor(p => p.SelectedTrack,
                          new SelectList(Model.TrackList),          
                          new { id       = "trackdropdown",
                                name     = "trackdropdown",
                                Class    = "dropdownstyle", 
                                style    = "width: 100px" , 
                                onchange = "this.form.submit();"})
}

在 xSelectRailPartial.cshtml

@using TBS.Etracs.Web.Main.Areas.Carrier.Models
@model LoadRailVehicleInputModel

<scripts>
    <script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</scripts>

@if (Model.RailCarList != null && Model.RailCarList.Count() > 0)
{
    @Html.DropDownListFor(p => p.SelectedRailCar,
                            new SelectList(Model.RailCarList),         
                            new { id       = "raildropdown",
                                  name     = "raildropdown",
                                  Class    = "dropdownstyle", 
                                  style    = "width: 100px" })
}

这是我通过 _viewstart 获得的 _layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Etracs</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
      @*  @Styles.Render("~/Content/css")        *@
      @*  @Scripts.Render("~/bundles/modernizr") *@
      @*  @Scripts.Render("~/bundles/jquery")    *@
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"                    type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"                type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.intellisense.js")"       type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
       @RenderSection("scripts", required: false) 
    </head>
    <body>

        <header>
            <div class="content-wrapper">
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                </div>
            </div>      
        </header>

        <div id="body">         
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>


        @Html.Partial("_ViewSwitcher")
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - Turning Basin Services</p>
                </div>
            </div>
        </footer>

    </body>
</html>

【问题讨论】：

我决定切换到直接的 Jquery，因为我读到你不能在 html.beginform 中包含 ajax.beginform（我最终会需要它）......
在遇到很多小问题后，我让 jquery 工作了.....对于那些追随我并阅读了这个问题的人来说，没想到的是 JsonResult 调用上需要 JsonRequestBehavior .. .
即。公共 JsonResult GetRailCars(string selectedTrack) { IRailCarService railCarService = new RailCarService(); LoadRailVehicleInputModel 模型 = 新 LoadRailVehicleInputModel();列表 railCarList = 新列表(); if (selectedTrack != null && selectedTrack != string.Empty) { // railCarList.Add("aaaa"); railCarList.Add("bbbb"); } 返回 Json(railCarList, JsonRequestBehavior.AllowGet); }

标签： ajax asp.net-mvc-4 ajax.beginform

【解决方案1】：

查看 cmets....我切换到直接 jquery 并遇到了很多问题（这就是我首先尝试 ajax.beginform 的原因）......但过了一段时间我消除了所有jquery 和调用中的问题现在可以正常工作了......还有一个额外的好处，就是我可以将这个新代码嵌入到 html.beginform 中

我从来没有弄清楚 ajax.beginform 中的问题是什么导致它无法在部分屏幕内创建...

【讨论】：