Ajax Partial View - обновляет всю страницу - PullRequest
Новая
       26

Ajax Partial View - обновляет всю страницу

1 голос
/ 03 апреля 2012

EDIT: Я понимаю, почему это не работает дважды. У меня есть вызов "Ajax.BeginForm ()" внутри div, который стирается. Я перенес это в частичное представление. Теперь он отлично работает в Internet Explorer, но не в Firefox или Chrome. Часть сохраняется в БД, но возвращаемое представление не является частичным представлением.

Я работаю над страницей "Изменить" для "Транспортного средства". У меня есть список деталей, которые можно добавить в автомобиль. Части показаны в частичном виде. Частичное представление в основном представляет собой DropDownList с некоторым количеством JavaScript.

Требуется обновить частичное представление, когда пользователь нажимает кнопку «Добавить деталь в транспортное средство». Происходит то, что в результате обновления вся страница заполняется частичным представлением.

Вот мои последние файлы:

Контроллер: 

[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>
...

1 Ответ

0 голосов
/ 04 апреля 2012

Ура!Я выигрываю!У меня были все виды вопросов формы.Я помещал @ Html.BeginForm в @ Html.BeginForm и то же самое для Ajax.BeginForm.

Как только я исправил эти проблемы, это сработало как прелесть!

...