.NET MVC Ajax Form - Как вы это скрываете? - PullRequest
Новая
       23

.NET MVC Ajax Form - Как вы это скрываете?

3 голосов
/ 28 марта 2010

Хорошо, все «функционально» работает с тем, что я пытаюсь выполнить, и еще раз, я уверен, что это что-то глупое, но я не могу понять, как это сделать.

У меня есть форма редактирования для объекта, скажем, машина. Эта «машина» может иметь 0 - много пассажиров. Итак, в моей форме редактирования у меня есть все поля для автомобиля, а затем в виде списка, показывающего каждого пассажира (частично). У меня также есть кнопка «Добавить нового пассажира», которая отображает новый частичный вид, позволяющий ввести пассажира. Здесь есть ссылка для отмены и кнопка добавления для отправки формы Ajax. Когда вы добавляете пассажира, он автоматически добавляется в список, но мне нужна форма ввода пассажира, чтобы уйти. Я попытался использовать функции onSuccess и onComplete, чтобы скрыть div, в котором находится форма, но оба отображают только частичные элементы HTML (белый экран, текст), а не частичный вид в контексте всей страницы.

Источники: 1) Основной вид редактирования 

    <script type="text/javascript">
    Function hideForm(){
        document.getElementById('newPassenger').style.display = 'none';
    }

</script>
<h2>Edit</h2>

<%-- The following line works around an ASP.NET compiler warning --%>
<%= ""%>

<%Html.RenderPartial("EditCar", Model)%>
<h2>Passengers for this car</h2>
<%=Ajax.ActionLink("Add New Passenger", "AddPassenger", New With {.ID = Model.carID}, New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%>
<div id="newPassenger"></div>
<div id="passengerList">
    <%Html.RenderPartial("passengerList", Model.Passengers)%>
</div>
<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div>

2) AddPassenger View. Ссылка отмены ниже - это действие, которое ничего не возвращает, удаляя информацию в div. 

<%  Using Ajax.BeginForm("AddPassengerToCar", New With {.id = ViewData("carID")}, New AjaxOptions With {.OnSuccess = "hideForm()", .UpdateTargetId = "passengerList", .InsertionMode = InsertionMode.Replace})%>   
    <%=Html.DropDownList("Passengers")%> 
    <input type="submit" value="Add" />
    <%=Ajax.ActionLink("Cancel", "CancelAddControl", _
                                            New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%><% end using %>

Ответы [ 2 ]

2 голосов
/ 28 марта 2010

Ладно - разобрался, наверное, прошлой ночью стало слишком поздно. Итак, вот ответ, на самом деле оказалось несколько небольших вопросов, которые в итоге привели к одному.

  1. Функция hideForm () в javascript должна быть функцией hideForm (), без прописных букв. Полагаю, слишком привык к написанию функций контроллера.
  2. Я использовал «hideForm ()» в атрибуте OnSuccess, а не «hideForm» - дох.
  3. Возможно, вы не хотите скрывать div, так как при повторном нажатии на ссылку добавления нового пассажира div не будет отображаться. Изменена функция hideForm, чтобы установить для свойства innerHTML элемента div значение ''.

Еще раз спасибо Дэрин за вашу помощь, я пытался извлечь из этого больше, чем оказалось.

1 голос
/ 28 марта 2010

Убедитесь, что вы ссылались на скрипты MicrosoftAjax.js и MicrosoftMvcAjax.js на своей странице. Причиной получения частичного содержимого представления (белый экран, текст) может быть ошибка сценария, которая препятствует правильному выполнению ajax. Посмотрите с помощью FireBug , если есть какие-то ошибки во время выполнения.

Что касается сокрытия формы, вы можете использовать обратный вызов OnSuccess: 

<% Using Ajax.BeginForm("AddPassengerToCar", 
    New With { .id = ViewData("carID")}, 
    New AjaxOptions With {
        .UpdateTargetId = "passengerList", 
        .InsertionMode = InsertionMode.Replace,
        .OnSuccess = "hideForm"
}) %>

Функция javascript hideForm будет выполнена, если вызов AJAX завершится успешно, и скроет желаемый div.

...