想要更新最后一节中的元素以反映MVC中编辑的值吗

Question

我正在使用向导。我想更新由所有DisplayFor生成的最后一节中的元素，以反映编辑后的值，这样我就可以在摘要部分中看到这些值。目前，如果步骤通过每个部分，直到摘要部分。我认为那里没有价值。我不知道该怎么做。任何人都请在这里帮我。

查看

@using (Html.BeginForm("OnlineEnrolment", "Home", FormMethod.Get))
{
@Html.AntiForgeryToken()
<div class="container">
<div class="form-horizontal">
<div class="col-md-6">
<div class="section">
<div class="panel panel-default">
<h4>BASIC INFO</h4>
<div class="panel-body">
<div class="form-group has-success ">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
<span class="input-group-addon"><i class="glyphicon glyphicon-ok"></i></span>
</div>
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-calendar"></i>
</div>
@Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="CoursesStudiedYesNo" style="padding-left:6em;">
@Html.Label("Have you studied before?")
<br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "Yes")<span id="SpacebetweenRadioandText">Yes</span><br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "No", new { @checked = "checked" })<span id="SpacebetweenRadioandText">No</span>
</div>
</div>
<div class="form-group ">
<div class="CoursesDropdown" style="padding-left:6em;">
@Html.LabelFor(model => model.CoursesStudied, htmlAttributes: new { @class = "control-label " })
<br />
@Html.DropDownListFor(m => m.CoursesStudied, Model.CoursesStudiedList, "Choose the course you have studied here", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CoursesStudied, "", new { @class = "text-danger" })
</div>
</div>
<div class="error"></div>
<button type="button" class="next pull-right">NEXT</button>
</div>
</div>
</div>
<div class="section">
<div class="panel panel-default">
<h4>CONTACT DETAILS</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Phone", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Mobile", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.mobileNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.mobileNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Address", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control", placeholder = "Street" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Suburb, new { htmlAttributes = new { @class = "form-control", placeholder = "Sub" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control", placeholder = "City" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Region, new { htmlAttributes = new { @class = "form-control", placeholder = "Region" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control", placeholder = "Country" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
<div class="error"></div>
<button type="button" class="previous pull-left">PREVIOUS</button>
<button type="button" class="next pull-right">NEXT</button>
</div>
</div>
</div>
<div class="section">
<div class="panel panel-default">
<h4>SELECT A COURSE</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Course", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CourseName, Model.CourseNameList, "Choose a course", new { @class = "form-control" })
</div>
</div>
<div class="error"></div>
<button type="button" class="previous pull-left">PREVIOUS</button>
<button type="button" class="next pull-right">NEXT</button>
</div>
</div>
</div>
<div class="section">
<div class="panel panel-default">
<h4>SUMMARY</h4>
<div class="panel-body">
<div>
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.EmailId)
</dt>
<dd>
@Html.DisplayFor(model => model.EmailId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.DOB)
</dt>
<dd>
@Html.DisplayFor(model => model.DOB)
</dd>
<dt>
@Html.DisplayName("Study History")
</dt>
<dd>
@Html.DisplayFor(model => model.CoursesStudied)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PhoneNumber)
</dt>
<dd>
@Html.DisplayFor(model => model.PhoneNumber)
</dd>
<dt>
@Html.DisplayNameFor(model => model.mobileNumber)
</dt>
<dd>
@Html.DisplayFor(model => model.mobileNumber)
</dd>
<dt>
@Html.DisplayName("Address")
</dt>
<dd>
@Html.DisplayFor(model => model.Street)
</dd>
<dd>
@Html.DisplayFor(model => model.Suburb)
</dd>
<dd>
@Html.DisplayFor(model => model.City)
</dd>
<dd>
@Html.DisplayFor(model => model.Region)
</dd>
<dd>
@Html.DisplayFor(model => model.Country)
</dd>
<dt>
@Html.DisplayName("Selected Course")
</dt>
<dd>
@Html.DisplayFor(model => model.CourseName)
</dd>
</dl>
</div>
<div class="error"></div>
<button type="button" class="previous pull-left">PREVIOUS</button>
<button type="submit" class="submit pull-right">SUBMIT</button>
</div>
</div>
</div>
</div> 
</div>
</div>
}

脚本

$('.next').click(function () {
var container = $(this).closest('.section');
var isValid = true;
$.each(container.find('input'), function () {
$('form').validate().element($(this));
if (!$(this).valid()) {
isValid = false;
return false;
}
});
if (isValid) {
container.next('.section').show().find('input').first().focus();
container.hide();
} else {
container.find('.error').text('please complete fields');
}           
});
$('.previous').click(function () {
debugger;
var container = $(this).closest('.section');
container.prev('.section').show().find('input').first().focus();
container.hide();
});

Answer 1

@Html.DisplayFor(..)将显示模型的原始值。要更新<dl>元素中的文本，请为其指定id属性，然后处理表单控件的.change()事件以更新它们，例如

<dl class="dl-horizontal">
<dt>@Html.DisplayNameFor(model => model.Name)</dt>
<dd id="display-name">@Html.DisplayFor(model => model.Name)</dd>
<dt>@Html.DisplayNameFor(model => model.EmailId)</dt>
<dd id="display-emailid">@Html.DisplayFor(model => model.EmailId)</dd>
....

然后创建脚本来更新文本

$('#Name').change(function() {
$('#display-name').text($(this).val());
});
$('#EmailId').change(function() {
$('#display-emailid').text($(this).val());
});
.... // repeat for other form controls