Question

我对MVC Razor很新（我们整个团队都是这样）我的问题是如何Ajax化一个部分视图，但只有Razor HtmlValidationMessagefor检查了它应该是什么，然后是ajax调用。

即使没有从DDL中选择任何内容（具有验证属性），下面的代码也允许ajax调用。）然后又做了一次失败......失去了它的模型。

我们完全迷失了。

父 Host.cshtml

＆＃13;

string pattern = @"^[A-Za-z_][A-Za-z0-9_]{0,15}(?:\.[A-Za-z_][A-Za-z0-9_]{0,15})*$";

＆＃13;

详细信息cshtml

＆＃13;

@model ReloadPartials.Models.MyContainer
@{
	ViewBag.Title = "Host";
}

<div class="form-horizontal" id="divHost">
	<h2>Host</h2>
	
	@using (Html.BeginForm("Host", "Example"))
	{
		@Html.AntiForgeryToken()
		@Html.Partial("Header", Model)
		@Html.Partial("Details", Model)

		<div id="divFooter" />
		<div class="form-group">
			<input type="submit" name="actionPerformed" value="Save All" class="btn btn-default col-md-offset-2 col-md-2" />
		</div>
	}
</div>
@section Scripts {
	@Scripts.Render("~/bundles/jquery")
	@Scripts.Render("~/bundles/jqueryval")
}

＆＃13;

Detail.cshtml （内部单个（或部分视图的多个实例，取决于Details.cshtml）

＆＃13;

@model ReloadPartials.Models.MyContainer

@{
	ViewBag.DetailIndex = 0;
	int detailItemsSideBySide = 2;
	int currentDetailItem = 1;
	int i = 0;
}
<div class="form-horizontal" id="divDetails">
	<h2>Details Section</h2>
		@*@for (int i = 0; i < Model.Details.Count(); i++)
		{*@
			Model.Details[i].Index = i;
			ViewBag.DetailIndex = i;

			<div id="@("divDetails_"+i)">
				@Html.Partial("Detail", Model)
			</div>

			if (currentDetailItem == detailItemsSideBySide)
			{
				currentDetailItem = 0;
				<div id="divFooter" />
			}
			currentDetailItem++;
		@*}*@
</div>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function ()
	{
		$("#btnReload" + @ViewBag.DetailIndex).on("click", function ()
		{
			alert("ajax ... " + @ViewBag.DetailIndex);

			var val = $('#txtInput'+@ViewBag.DetailIndex).val();
			var ModelData =  $('form').serialize();

				$.ajax({
					url: "/Example/GetAjaxPostBackData_OnlyTextBox",
					type: "GET",
					data: { ajaxDetailModelData: ModelData, index: @ViewBag.DetailIndex}
					,
					async: false
					//contentType: "application/json; charset=utf-8",
					//dataType: "json"
					})
					.done(function (partialViewResult)
					{
						alert("ajax done " + @ViewBag.DetailIndex);
						//This replaces the Partial in the Div, with the new partial
						$('#divDetails_' +@ViewBag.DetailIndex).replaceWith(partialViewResult);
					});
			});
		});

</script>

＆＃13;

控制器

@model ReloadPartials.Models.MyContainer

@{
	int index = ViewBag.DetailIndex;
}

<div class="form-horizontal" id="divDetail">
	<h2>Detail Section @index.ToString()</h2>

	@Html.HiddenFor(model => model.Details[index].HeaderId)
	@Html.HiddenFor(model => model.Details[index].Id)

	<div class="form-group" id="ddlDiv">
		@Html.LabelFor(model => model.Details[index].Name, htmlAttributes: new { @class = "control-label col-md-2" })
		<div class="col-md-10">

			@*This on change will call submit*@
			@*@Html.DropDownListFor(model => model.Details[index].Name, (SelectList)ViewBag.Names, "Select a Name", htmlAttributes: new { @class = "form-control", onchange = "$(this.form).submit();" })*@

			@Html.DropDownListFor(model => model.Details[index].Name,
				(SelectList)ViewBag.Names, "Select a Name",
				htmlAttributes: new { @class = "form-control" , id = "ddlNames" + index.ToString() })

			@Html.ValidationMessageFor(model => model.Details[index].Name, "", new { @class = "text-danger" })

		</div>
	</div>

	<div class="form-group" id="txtInpDiv">
		@Html.LabelFor(model => model.Details[index].SomeNumber, htmlAttributes: new { @class = "control-label col-md-2" })
		<div class="col-md-10">
			@Html.EditorFor(model => model.Details[index].SomeNumber,
				 new { htmlAttributes = new { @class = "form-control", id = "txtInput" + index.ToString() } })
			
			@Html.ValidationMessageFor(model => model.Details[index].SomeNumber, "", new { @class = "text-danger" })
			<p>@Model.Details[index].SomeNumber.ToString()</p>

		</div>

		<div id="BottomDiv"></div>
	</div>

	@*This button (and/or combo onchange) should actually go get data from the server and then just reload this detail section using AJAX*@
	@*Use razor and the viewbag to uniquely identify each instance of this partial, such that we can identify which instance of this partial invoked the Ajax call*@
	<div class="form-group">
		<button id ="@("btnReload" +  @ViewBag.DetailIndex)" name="actionPerformed" value="Reload Detail"
				class="btn btn-default col-md-offset-2 col-md-3">Reload</button>
	</div>

</div>

感谢

布局

如何Ajaxify使用Razor验证的部分视图

0 个答案: