下拉列表更改时不呈现部分视图答案

【问题标题】：Partial view not rendering on dropdownlist change下拉列表更改时不呈现部分视图
【发布时间】：2014-12-29 16:58:22
【问题描述】：

i have a drop down list that when a value is selected, a partial view rendering the relevant data is supposed to be shown.我已经用了几天了，因为我是新手，似乎无法让它工作。帮助任何人。

索引

@{ ViewBag.Title = "Voyage Information"; }

@using (Ajax.BeginForm("Index", "VM", new AjaxOptions { UpdateTargetId  = "VMResults" }))
{ 

<div id="container">  
    <label for="ddlvm"><strong>Select Vessel</strong></label>
    @Html.DropDownListFor(m =>m.Vessel_ID,(SelectList)ViewBag.ddl, "-- Select Vessel --", new {@id = 
    "ddlvm"}) 

    <br/><br/>

    <div id="VMResults">

    </div>
</div>  
}

<script type="text/javascript">
$(document).ready(function () {
    $("#ddlvm").change(function () {
         var vId = $("#ddlvm").val();
            $("#VMResults").load('@(Url.Action("GetVessel","VM",null, Request.Url.Scheme))?vId=' +  
    vId);
    });     
});

控制器

public ActionResult Index()
{
    ViewBag.ddl = new SelectList(db.X_VesselMaster.OrderBy(x => x.Vessel_Name), "Vessel_ID", "Vessel_Name");
    return View();
}


[HttpGet]
public ActionResult GetVessel(int y)  
{
    var viewModel = new VoyageData();
    viewModel.VesselMasters = db.X_VesselMaster.Where(i => i.Vessel_ID == (y)).Include(i => 
    i.X_Vessel_Transaction_Header).ToList();

    if (y != null)
    {
        viewModel.Vessel_Transaction_Headers = viewModel.VesselMasters.Single(i => i.Vessel_ID == 
    (y)).X_Vessel_Transaction_Header.Where(c => c.Deleted <= 0).ToList();
    }
    return PartialView("_Voyages", viewModel);

}

局部视图

@model ......
<table>  
    <thead>
    <tr><th>Vessel ID</th></tr>
        <tr>
            <th>Arrived</th>

        </tr>
    </thead>

    @foreach (var m in Model.Vessel_Transaction_Headers)
        {
           <tr><td>@m.Vessel_ID</td></tr> 

           <tr>
                <td>@m.Arrived</td>

                 </tr>
        }   

</table>

【问题讨论】：

在您的控制器中，您需要一个名为 y 的参数，但您发送了一个参数 ?vId=

标签： asp.net-mvc-4 razor asp.net-mvc-partialview cascadingdropdown

【解决方案1】：

您必须更改 javascript 以便它提交您创建的表单。使用jquery找到它（如果它是唯一的，你可以简单地用$form=$('form')找到它。如果有多个你可以为它指定一个id（在Ajax.beginFormhelper的atrributes参数中）并查找它使用 id，就像这样 $form = $('#theFormId')。一旦你用 jQuery 选择了它，只需解开表单 DOM 对象，然后调用它的提交方法，就像这样：$fomr[0].submit()。

一旦发生这种情况，不显眼的 ajax 助手将负责在表单中发布数据，并更新 VMResults id 内容。

问题在于您将两种技术混为一谈：纯 ajax 以及 ASP.NET Ajax 助手和不显眼的助手。

如果您想使用简单的 jQuery ajax 来实现，则根本不需要表单。只需在您的更改事件处理程序中执行以下操作：

$("#ddlvm").change(function () {
  var vId = $("#ddlvm").val();
  jQuery.get('@(Url.Action("GetVessel","VM",null, Request.Url.Scheme))?vId=' + vId);
  }).done(function(html) {
    $('#VMResults').html(html);
  });
});

请注意，您需要进行 ajax 调用 get，然后等待响应，这是在 .done() 函数中完成的。当您的浏览器从服务器获得响应时，将调用 done 回调，将服务器响应作为参数传递，这是您的预期答案。

简而言之：要么使用 ASP.NET MVC Ajax 帮助程序，要么使用纯 jQuery 和 JavaScript ajax。至少，您现在应该知道您正在混淆两种不同的东西。

【讨论】：