MVC 3使用下拉列表和ajax来获取新模型
MVC 3 using dropdownlist and ajax to get a new model
我有一个局部视图,当第一次打开有一个空模型。它由一个下拉列表,文本区域和2个文本框组成。当用户从下拉菜单中选择一个值时,我想返回并获取一个带有值的模型并填充我的视图。这是如何做到的呢?
下面是我将部分视图加载到拆分器控件中的初始操作:
Function SelectDisclosures() As ActionResult
Return PartialView()
End Function
视图:<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of Community_Portal_Admin.Disclosure)" %>
<script type="text/javascript">
function onDropDownListChange(e) {
var editor;
if (e.value != '') {
$.post('<%:Url.Action("_SelectDisclosures","SiteTerms") %>', { id: e.value },
function (data) {
if (data != "Error") {
editor = $('#DisclosureHTML').data('tEditor');
editor.value(data);
} else {
return false;
}
});
}
}
</script>
<% Using Html.BeginForm("UpdateDisclosure", "SiteTerms", FormMethod.Post, New With {.id = "DisclosuresForm"})%>
<fieldset>
<div class="gridFrame">
<br />
<%: Html.Label("WebRole", "Role: ")%>
<%: Html.Telerik().DropDownList() _
.Name("WebRoles") _
.ClientEvents(Function(e) e.OnChange("onDropDownListChange")) _
.DataBinding(Function(binding) binding.Ajax().Select("_SelectWebRoles", "SiteTerms"))
%>
<br /><br />
<%: Html.Telerik().Editor() _
.Name("DisclosureHTML") _
.HtmlAttributes(New With {.id = "DisclosureHTML", .style = "height:275px;"})
%>
<br />
<%: Html.TextBoxFor(Function(m) m.ID, New With {.id = "hidID"})%>
<%: Html.TextBoxFor(Function(m) m.WebRoleID, New With {.id = "hidWebRoleID"})%>
<%: Html.TextAreaFor(Function(m) m.DisclosureHTML, New With {.id = "hidDisclosureHTML"})%>
<div class="smallFrameLeft">
<%: Html.ActionLink("Cancel", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%>
</div>
<div class="smallFrameRight">
<input type="submit" name="Save" value="Save" class="t-button" />
</div>
</div>
</fieldset>
<%-- <script type="text/javascript">
$(".smallFrameRight").click(function (e) {
var form = $(this).closest("form");
e.preventDefault();
$.blockUI({ message: '<div style="text-align: top;"><img src="Images/loading.gif" /><h3> Saving...</h3></div>' });
$.post(form.attr("action"), form.serialize(), function (data) {
});
setTimeout($.unblockUI, 400);
});
</script>--%>
<% End Using%>
填充下拉列表的动作:
Function _SelectWebRoles() As ActionResult
Dim l As IList(Of WebRole) = Nothing
Try
l = WebRoleRepository.All()
Return New JsonResult With {.Data = New SelectList(l, "ID", "Name")}
Catch ex As Exception
TempData("ErrorMessage") = "There was a problem during page load: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
Return RedirectToAction("HttpError", "Error")
Finally
If Not l Is Nothing Then l = Nothing
End Try
End Function
这是我最初的操作,我只是简单地返回一个文本值并将其设置到编辑器中。但我更愿意带回整个模型让它自己填充视图,这样我也可以更容易地发布整个模型。
'Function GetDisclosure(ByVal id As Integer) As ActionResult
' Dim setting As Disclosure = Nothing
' Dim notice As String = String.Empty
' Try
' setting = DisclosureRepository.One(Function(d) d.WebRoleID = id)
' If Not setting Is Nothing Then notice = HttpUtility.HtmlDecode(setting.DisclosureHTML)
' Return Content(setting)
' Catch ex As Exception
' Return Content("Error")
' Finally
' If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
' notice = Nothing
' End Try
'End Function
我自己使用了一些jQuery魔法,这是视图:
<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of Community_Portal_Admin.Disclosure)" %>
<script type="text/javascript">
function onDropDownListChange(e) {
var hid;
var hrole;
var editor;
var arry = Array();
hid = document.getElementById("hidID");
hrole = document.getElementById("hidWebRoleID");
editor = $('#DisclosureHTML').data('tEditor');
if (e.value != '') {
$.post('<%:Url.Action("GetDisclosure","SiteTerms") %>', { id: e.value },
function (data) {
if (data != "NotFound") {
arry = data.split("|||");
hid.value = arry[0];
hrole.value = arry[1];
editor.value(arry[2]);
} else {
hid.value = -1;
hrole.value = e.value;
editor.value('');
return false;
}
});
}
}
</script>
<% Using Html.BeginForm("UpdateDisclosure", "SiteTerms", FormMethod.Post, New With {.id = "DisclosuresForm"})%>
<fieldset>
<div class="gridFrame">
<br />
<%: Html.Label("WebRole", "Role: ")%>
<%: Html.Telerik().DropDownList() _
.Name("WebRoles") _
.ClientEvents(Function(e) e.OnChange("onDropDownListChange")) _
.DataBinding(Function(binding) binding.Ajax().Select("_SelectWebRoles", "SiteTerms"))
%>
<br />
<br />
<%: Html.Telerik().EditorFor(Function(m) m.DisclosureHTML) _
.Name("DisclosureHTML") _
.HtmlAttributes(New With {.id = "DisclosureHTML", .style = "height:275px;"})
%>
<br />
<%: Html.HiddenFor(Function(m) m.ID, New With {.id = "hidID"})%>
<%: Html.HiddenFor(Function(m) m.WebRoleID, New With {.id = "hidWebRoleID"})%>
<div class="smallFrameLeft">
<%: Html.ActionLink("Cancel", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%>
</div>
<div id="saveButton" class="smallFrameRight">
<input type="submit" name="Save" value="Save" class="t-button" />
</div>
<div id="deleteButton" class="smallFrameRight">
<input type="submit" name="Delete" value="Delete" class="t-button" />
</div>
</div>
</fieldset>
<script type="text/javascript">
$("#saveButton").click(function (e) {
var form = $(this).closest("form");
e.preventDefault();
$.blockUI({ message: '<div style="text-align: top;"><img src="Images/loading.gif" /><h3> Saving...</h3></div>' });
$.post(form.attr("action"), form.serialize(), function (data) {
});
setTimeout($.unblockUI, 400);
});
$("#deleteButton").click(function (e) {
e.preventDefault();
var hid;
var hrole;
var editor;
hid = document.getElementById("hidID");
hrole = $('#WebRoles').data('tDropDownList').value();
editor = $('#DisclosureHTML').data('tEditor');
if (hrole != '') {
$.blockUI({ message: '<div style="text-align: top;"><img src="Images/loading.gif" /><h3> Deleting...</h3></div>' });
$.post('<%:Url.Action("DeleteDisclosure","SiteTerms") %>', { id: hrole },
function (data) {
if (data != "Error") {
hid.value = -1;
editor.value('');
} else {
return false;
}
});
setTimeout($.unblockUI, 400);
}
});
</script>
<% End Using%>
这是控制器:
#Region "Disclosure"
Function SelectDisclosures(ByVal model As Disclosure) As ActionResult
Try
ViewData.Model = model
Return PartialView()
Catch ex As Exception
TempData("ErrorMessage") = "There was a problem during page load: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
Return RedirectToAction("HttpError", "Error")
End Try
End Function
Function _SelectWebRoles() As ActionResult
Dim l As IList(Of WebRole) = Nothing
Try
l = WebRoleRepository.All()
Return New JsonResult With {.Data = New SelectList(l, "ID", "Name")}
Catch ex As Exception
TempData("ErrorMessage") = "There was a problem during page load: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
Return RedirectToAction("HttpError", "Error")
Finally
If Not l Is Nothing Then l = Nothing
End Try
End Function
Function GetDisclosure(ByVal id As Integer) As ActionResult
Dim setting As Disclosure = Nothing
Try
setting = DisclosureRepository.One(Function(d) d.WebRoleID = id)
If Not setting Is Nothing Then setting.DisclosureHTML = HttpUtility.HtmlDecode(setting.DisclosureHTML)
Return Content(setting.ID.ToString & "|||" & setting.WebRoleID.ToString & "|||" & setting.DisclosureHTML)
Catch ex As Exception
Return Content("NotFound")
Finally
If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
End Try
End Function
<HttpPost()> _
Function UpdateDisclosure(ByVal setting As Disclosure) As ActionResult
Try
If setting.ID = -1 Then
If TryUpdateModel(setting) Then
DisclosureRepository.Insert(setting)
End If
End If
If TryUpdateModel(setting) Then
DisclosureRepository.Update(setting)
End If
Return PartialView(setting)
Catch ex As Exception
TempData("ErrorMessage") = "There was a problem during update: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
Return RedirectToAction("HttpError", "Error")
Finally
If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
End Try
End Function
<HttpPost()> _
Public Function DeleteDisclosure(id As Integer) As ActionResult
Dim setting As Disclosure = Nothing
Dim x As Integer = 0
Try
setting = DisclosureRepository.One(Function(d) d.WebRoleID = id)
x = setting.ID
If TryUpdateModel(setting) Then
DisclosureRepository.Delete(x)
End If
Return RedirectToAction("SelectDisclosures", setting)
Catch ex As Exception
Return Content("Error")
Finally
If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
End Try
End Function
#End Region
相关文章:
- 如何从Angularjs中的新日期获取日期格式
- Sequelize associations:set[Models]添加新模型,而不是关联现有模型
- 使用 ng 模型获取数据时遇到问题
- 在获取后将新模型准备到集合中(不带比较器)
- 如何将数据从模型获取到JavaScriptMVC4
- 主干中的比较器在添加新模型时需要排序调用
- 如何在创建保存新模型时获取id
- Emberjs操作模型不会初始化新模型
- 如何在模型获取完所有信息后才将其传递给视图's数据
- 在 View.event Backbone.js 中创建新模型
- 挖空,映射后从视图模型获取 JSON
- 从视图中的模型获取属性的主干
- 主干.js:仅添加来自 JSON 集合获取的新模型
- Yii:使用 ajax 动态加载新模型
- 为什么当我将数据选项添加到骨干模型获取时,它不会触发回调
- 如何在角度.js中使用ng模型获取按钮文本
- 主干模型获取属性函数返回上次更新的值
- 将数据从模型获取到视图
- MVC 3使用下拉列表和ajax来获取新模型
- 骨干:在添加到集合之前从服务器获取新模型