Question

编辑：我明白为什么它没有运行两次。我在被删除的div中调用了“Ajax.BeginForm（）”。我把它移到了部分视图。现在它在Internet Explorer中运行良好，但在Firefox或Chrome中运行不佳。部件保存到数据库，但返回的视图不是部分视图。

我正在为“车辆”制作“编辑”页面。我有一个可以添加到车辆的零件清单。部件以局部视图显示。部分视图基本上是带有一些javascript的DropDownList。

我想要的是当用户点击“添加零件到车辆”按钮时更新局部视图。发生的事情是更新导致整个页面被部分视图填充。

以下是我的最新文件：

控制器：

[HttpGet]
    public ActionResult _AddPartToVehicle(IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel> vehicleEditAddPartToVehicleViewModel)
    {
        return View(vehicleEditAddPartToVehicleViewModel);
    }


    [HttpPost]
    public ActionResult _AddPartToVehicle(Guid partID, Guid vehicleID)
    {
        Vehicle vehicle = db.Vehicles.Find(vehicleID);
        Part part = db.Parts.Find(partID);

        //protect against concurrency (what if someone has deleted this part or this vehicle since the form was loaded?)
        try
        {
            if ((vehicle != null) && (part != null))
            {
                vehicle.Parts.Add(part);
                db.SaveChanges();
                ViewBag.VehicleID = vehicleID;

                return PartialView(GetPartsForThisVehicle(vehicle));
            }
        }
        catch (DataException)
        {
            //Log the error (add a variable name after Exception)
            ModelState.AddModelError(string.Empty, "Unable to add part to vehicle. Try again, and if the problem persists contact your system administrator.");
        }

部分视图：

@model IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel>

@section scripts{

}

@using (Ajax.BeginForm("_AddPartToVehicle", new AjaxOptions() { UpdateTargetId = "divAddPartToVehicle", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace }))
{
<fieldset>

        <legend>Parts For This Vehicle</legend>
        @if (Model != null)
        {
            if (Model.ToList().Count > 0)
            {

                <div class="editor-field">

                    <table>
                        <tr>
                            <th>Part</th>
                            <th></th>
                        </tr>

                        @foreach (var part in Model)
                        {
                            if (part.OnVehicle)
                            {
                                <tr>
                                    <td>
                                        @part.Name
                                    </td>
                                    <td>
                                        @Html.ActionLink("Details", "Edit", "Part", new { id = part.PartID }, null) |
                                        @Html.ActionLink("Remove", "RemoveVehiclePart", new { partID = part.PartID, vehicleID = ViewBag.VehicleID })
                                    </td>
                                </tr>                                    
                            }
                        }
                    </table>              
                </div>  
            }
        }


        <table class="layouttable">
            <tr>
                <td>
                        <div title="" id="tooltip">
                        @{
        IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel> partsNotOnVehicle = new List<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel>();

        foreach (var part in Model)
        {
            if (!part.OnVehicle)
            {
                ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel partNotOnVehicle = new ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel();

                partNotOnVehicle.Cost = part.Cost;
                partNotOnVehicle.Name = part.Name;
                partNotOnVehicle.Notes = part.Notes;
                partNotOnVehicle.OnVehicle = part.OnVehicle;
                partNotOnVehicle.PartID = part.PartID;

                partsNotOnVehicle.Add(partNotOnVehicle);
            }
        }

                            @Html.DropDownList("partID", partsNotOnVehicle.Select(m => new SelectListItem() { Text = m.Name, Value = m.PartID.ToString() }), new { @class = "dropdown", onchange = "GetDivTitle(this.value)", onmouseover = "GetDivTitle(this.value)" })
                        }
                        </div> 
                </td>
            </tr>
            <tr>
                <td>
                    <div id="divAddPartToVehicle">
                        <input type="hidden" name="vehicleID" value="@ViewBag.VehicleID") />                            
                        <input type="submit" value="Add Part To Vehicle"/>
                    </div>
                </td>
            </tr>

        </table> 
    </fieldset>
}

<script type="text/javascript">
    function GetDivTitle(value) {
        document.getElementById("tooltip").title = GetDropDownNotes(value);
    }

    function GetDropDownNotes(value) {
        switch (value) {
            @foreach (ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel item in Model)
            {
                <text>
                    case '@item.PartID.ToString()':
                        return '@item.Notes.Replace("\'", "").Replace("\"", "").Replace("\n", "").Replace("\r", "")';
                        break;
                </text>                   
            }
        }
    }     
</script>

查看：

@section scripts {
@Content.Script("jquery.validate.min.js", Url)
@Content.Script("jquery.validate.unobtrusive.min.js", Url)
@Content.Script("jquery.unobtrusive-ajax.min.js", Url)
}
...
    <div id="divAddPartToVehicle">

            @Html.Partial("_AddPartToVehicle", (IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel>)ViewBag.Parts)

    </div>
...

Answer 1

耶！我赢了！我有各种各样的表格问题。我把@ Html.BeginForm放在@ Html.BeginForm中，对于Ajax.BeginForm也是如此。

一旦我解决了这些问题，它就像一个魅力！

Ajax部分视图 - 更新整个页面

1 个答案: