我正在尝试使用jQueryUI对话框来显示匹配数据列表,并使用ajax / jquery通过JSon将所选数据返回到原始视图。
流程为View(用户完成文本框并单击超链接)>在jQuery对话框中的部分视图> JSon数据重新形成。
我最初的问题是: -
Q值。这应该是可能的,还是我想做一些不可能的事情?
如果它应该有效,这是我的代码
Index.view
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@Html.TextBox("Postcode") <a href="#" id = "PCSearch">Search</a>
<div id="mDialog"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#mDialog").dialog({
modal: true,
width: 550,
height: 250,
resizable: true,
position: 'center',
title: 'Select Correspondent',
autoOpen: false,
dataType: 'json',
//open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
success: function (data) {
}
});
$('#PCSearch').click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/Item/Search",
dataType: 'html',
data: { Postcode: $("#Postcode").val() },
success: function (data) {
$("#mDialog").html(data).dialog('open');
console.log("Hello");
}
});
});
});
</script>
ItemController
[HttpPost]
public ActionResult Search(string postcode)
{
if (postcode == null || postcode == "")
{
return PartialView("SearchByPostCode", null);
}
var model = Correspondents.Where(x => x.Postcode.ToLower().Contains(postcode.ToLower()));
return PartialView("SearchByPostCode", model);
}
[HttpPost]
public ActionResult ChooseCorrespondent(int CorrespondentID)
{
return Json(CorrespondentID, "text/html");
}
流程工作正常,用户输入文本,项目/搜索部分视图显示在模式对话框中,当用户选择按钮时,点击ChooseCorrespondent,但页面重定向到带有CorrespondentID的空白屏幕,而不是回到调用页面。
我尝试了许多示例和方法来捕获JSON并更新了Index视图,但它失败了(错误)或者将Json返回到空白页面。
Q值。在这种情况下捕获Json返回的最佳方法是什么?
感谢您花时间阅读这篇文章!
更新
我已将javascript合并到:
$(document).ready(function () {
$('#PCSearch').click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/Item/Search",
dataType: 'html',
data: { Postcode: $("#Postcode").val() },
success: function (data) {
$("#mDialog").html(data).dialog({
modal: true,
width: 550,
height: 250,
resizable: true,
position: 'center',
title: 'Select Correspondent',
autoOpen: false
}).dialog('open');
//How can I trap the Json returned from this dialog open?
//Using a bindForm function ?
}
});
});
});
我正在尝试捕获返回的Json并更新原始页面。
答案 0 :(得分:0)
这有点令人费解,但现在正在运作
javascript是
<script type="text/javascript">
$(document).ready(function () {
$("#searchClick").live("click", function (e) {
e.preventDefault();
var title = 'Select Correspondent';
var url = '@Url.Action("Select", "Correspondent", new { Postcode = "xx" })'.replace('xx', $("#Postcode").val().replace(" ", ""));
$('#dialog').load(url, function () {
$(this).dialog({
open: function (event, ui) { $('#submit').blur(); },
title: title,
modal: true,
width: 700,
height: 350,
resizable: false
})
bindForm(this);
});
return false;
});
$("#searchClear").live("click", function (e) {
resetCorrespondent();
});
});
function bindForm(dialog) {
$('form', dialog).submit(function (data) {
data.preventDefault();
$('#dialog').dialog('close');
var chosenID = $("input[type=submit][clicked=true]").prev().val();
var url = '@Url.Action("Picked", "Correspondent", new { CorrespondentId = "xx" })'.replace('xx', chosenID);
$.post(url, function (response) {
if (response.success) {
if (typeof response.Correspondent == 'object') {
var $inputs = $('#IC input');
$.each(response.Correspondent, function (key, value) {
$inputs.filter(function () {
return "Item.Correspondent." + key == this.name;
}).val(value).attr("disabled", true);
});
var text1 = 'Two';
$("select option").filter(function () {
return $(this).text() == response.Salutation;
}).attr('selected', true).attr("disabled", true);
$("#Item_CorrespondentID").val(response.Correspondent.CorrespondentID);
$("#searchClick").hide();
$("#searchClear").show();
$("#EnterName").hide();
$("#ShowName").show();
}
}
else {
resetCorrespondent();
}
});
});
}
function resetCorrespondent() {
$('#IC input').each(function (i) {
$(this).val("");
$(this).removeAttr("disabled");
});
$("#searchClick").show();
$("#searchClear").hide();
$("#EnterName").show();
$("#ShowName").hide();
}
</script>
控制器
public ActionResult Select(string postcode)
{
if (postcode == null || postcode == "")
{
return PartialView();
}
var model = db.GetCorrespondentByPartialPostcode(postcode);
return PartialView("_Select",model);
}
[HttpPost]
public ActionResult Picked(int CorrespondentID)
{
Correspondent model = db.GetCorrespondentByID(CorrespondentID);
return Json(new { success = true, Correspondent = model, Salutation=model.Salutation.Detail }, JsonRequestBehavior.AllowGet);
}
部分视图是
@if (Model == null || Model.Count() == 0)
{
<div>No matches</div>
}
else
{
foreach (var item in Model)
{
using (Html.BeginForm("Select", "Three", FormMethod.Post))
{
<div>@item.DisplayName <span>@item.SingleLineAddress</span>
<input type="hidden" id="CorrespondentID" value="@item.CorrespondentID" />
<input type="submit" value="Select" id="submit" /></div>
}
}
<script type="text/javascript">
$(document).ready(function () {
$("form input[type=submit]").click(function () {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
}