Я начну с того, что предлагаю начать использовать JQuery для функций javascript / ajax.ASP.Net MVC3 прекрасно поддерживает JQuery.Я пока проигнорирую проверку письма, так как без него вам будет гораздо легче начать.Общий обзор будет следующим:
- Добавьте сценарий JQuery на свою страницу
- Добавьте сценарий JQuery vsdoc на свою страницу, чтобы у вас был некоторый смысл
- Создайтечастичное представление для отображения электронного письма и кнопки отправки
- Создайте действие контроллера, которое выполняет поиск электронной почты, который вы упомянули
- Создайте div, чтобы принять вновь возвращенную форму обновления электронной почты
- ИспользованиеJQuery для переопределения отправки в вашем поиске по имени пользователя вместо выполнения обновления ajax (и заполнения div формы обновления электронной почты)
1.Добавьте скрипт JQuery на свою страницу
Это должно быть довольно просто - просто перетащите его из папки скриптов.Я думаю, что mvc3 поставляется с jquery-1.5.1.js.Используйте версию min (minified) при выпуске в производство.
2.Добавьте скрипт JQuery vsdoc на свою страницу, чтобы у вас был некоторый intellisense
Не все так просто - вы захотите использовать оператор if, который всегда оценивается как ложный, чтобы скрипт фактически не включался в вашсодержание.Наличие этого на странице, тем не менее, заставит VS использовать это для intellisense.Поместите это в верхней части вашего обзора:
@if (false) { <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> }
Надеюсь, вы используете Razor.Если нет, начните использовать его.Сначала мне это показалось немного чуждым, но для этого требовалось гораздо меньше разметки.
3.Создайте частичное представление, чтобы показать электронную почту и отправить кнопку
. Вы можете использовать ViewBag для передачи адреса электронной почты и имени пользователя (пока мы игнорируем проверку), но продолжайте и сделайте так, чтобы он был строго типизирован.к вашей модели сверху.Ваше мнение может выглядеть примерно так:
@model ChangeEmailModel
@{using (Html.BeginForm("UpdateEmail", "Home", FormMethod.Post, new { id = "UpdateEmailForm" }))
{
<input type="hidden" name="userName" value="@Model.UserName" />
@Html.EditorFor(m => m.Email)
<button id="submitEmailUpdate" type="submit">Submit</button>
}
}
Обратите внимание, что мы дали идентификаторы для формы и кнопку отправки.JQuery найдет форму и кнопку на основе этих идентификаторов.(если нам нужно, что мы и сделаем, если захотим «отрегулировать» действие по обновлению электронной почты. Я не стал вдаваться в подробности здесь, но это будет тот же процесс, который будет работать, как и для исходного имени пользователя).поиск)
4.Создайте действие контроллера, которое выполняет поиск по электронной почте, о котором вы упомянули Я не буду здесь подробно рассказывать о контроллерах (как вы спрашиваете об обновлениях типа ajax), но это может выглядеть следующим образом:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult LookupEmail(string userName)
{
//connect to db and lookup email based on passed in username
//create a new instance of your model
var changeEmailModel = new ChangeEmailModel(.....)
//return a partial view
return PartialView("EmailUpdateForm", changeEmailModel);
}
Убедитесь, чточтобы вернуть PartialView здесь, а не View.
5.Создайте div, чтобы принять вновь возвращенную форму обновления электронной почты
Убедитесь, что этот div не содержится в вашей форме поиска имени пользователя (так как вы хотите ее скрыть).Мы будем работать с двумя отдельными формами.Этот div может быть скрыт, если вы предпочитаете (но в любом случае он будет пустым). Я называю его emailFormDiv
6.Вместо этого используйте JQuery, чтобы переопределить отправку при поиске по имени пользователя, чтобы выполнить обновление ajax
JQuery позволит вам присоединять функции к ... ну много вещей, но мы будем использовать его для переопределениякнопка отправки в вашей форме поиска имени пользователя.Предположим, что ваша исходная форма поиска имени пользователя с идентификатором «formUserNameLookup» имеет кнопку отправки с идентификатором «submitUserNameLookup».Затем вы должны создать тег script, который будет выглядеть примерно так:
<script type="text/javascript" language="javascript">
$(document).ready(function () { //The document.ready function will fire when the html document is... ready
$('#submitUserNameLookup').click(function (ev) { //fires when the submit button is clicked
ev.preventDefault(); //prevent the normal action of the button click
$.post($('#formUserNameLookup').attr('action'), //get the url from the form's action attribute. Could be hard coded for simplicity
$('#formUserNameLookup').serialize(), //serialize the data in the form
function (response, status) {
$('#emailFormDiv').html(response); //replace the html of your div with the response
$('#formUserNameLookup').hide(); //hide the original form
}, 'html'); //states that we are expecting html back from the post
});
});
</script>
Приведенный выше код добавляет функцию, запускаемую при нажатии кнопки отправки. Конечно, он не запустится, пока кнопка не будет нажата. Использование JQuery / Javascript для присоединения функций к html-элементам, а не встраивание их непосредственно в элемент, безусловно, является предпочтительным, и его называют ненавязчивым javascript. Если вы продолжите настройку большей части своей страницы, вы захотите изучить живые и / или делегированные функции JQuery. Обратите внимание, что есть множество вещей, которые можно изменить, когда вы начнете искать производительность и / или лучшие практики. Выше все должно помочь. Я надеюсь, что я не сделал слишком много предположений относительно вашего текущего уровня знакомства с ASP.Net MVC (например, контроллеры и отправка сообщений на контроллеры), но непременно спросите, нужна ли вам дополнительная помощь.