Question

我有一个下拉列表，当选择一个值时，应该显示呈现相关数据的局部视图。我已经在这里待了几天，因为我对此很陌生并且似乎无法让它发挥作用。帮助任何人。

INDEX

@{ 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);
    });     
});

CONTROLLER

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>

Answer 1

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

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

问题是你正在混合两种技术：纯粹的ajax，ASP.NET Ajax助手和不引人注目的助手。

如果你想使用简单的jQuery ajax，你根本不需要表格。只需在您的更改事件处理程序中执行类似这样的操作：

$fomr[0].submit()

请注意，您需要进行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); }); });，然后等待响应，这在get函数中完成。当您的浏览器从服务器获得响应时，将调用完成回调，将服务器响应作为参数传递，这是您的预期答案。

简而言之：使用ASP.NET MVC Ajax助手或使用纯jQuery和JavaScript ajax。至少，你现在应该知道你正在混合两种不同的东西。

部分视图未在下拉列表中呈现更改

1 个答案: