Asp.net mvc 3 需要MVC2/MVC3 Html帮助程序或编辑器模板解决方案
我有一个基于jquery的定制查找控件,它工作得很好,但我希望将其封装到一个更整洁的解决方案中。下面是Razor视图中包含的代码。在幕后还有一个名为“InitLookup”的定制jquery函数,它在运行时完成大部分工作Asp.net mvc 3 需要MVC2/MVC3 Html帮助程序或编辑器模板解决方案,asp.net-mvc-3,asp.net-mvc-2,razor,html-helper,razor-declarative-helpers,Asp.net Mvc 3,Asp.net Mvc 2,Razor,Html Helper,Razor Declarative Helpers,我有一个基于jquery的定制查找控件,它工作得很好,但我希望将其封装到一个更整洁的解决方案中。下面是Razor视图中包含的代码。在幕后还有一个名为“InitLookup”的定制jquery函数,它在运行时完成大部分工作 <script type="text/javascript"> $(document).ready(function () { InitLookup('#txtDelegatedToLookup', '#Delegated_
<script type="text/javascript">
$(document).ready(function () {
InitLookup('#txtDelegatedToLookup', '#Delegated_To_ID', '@Url.Action("ContactLookup", "marMIS")');
});
</script>
@Html.HiddenFor(m => m.Delegated_To_ID)
<input id="txtDelegatedToLookup" type="text" />
…其中“marMIS”是控制器,“ContactLookup”是控制器方法。这些是在查找期间用于获取数据的地址
我试图在/Views/Shared/EditorTemplates文件夹中创建名为DynamicLookup的编辑器模板,但在使用@Html.DynamicLookup(
有人接受这个吗?干杯
------------下面是应用程序代码建议!原始问题附录-------------------------
好的,我已经将代码复制到一个名为CustomHelpers.cshtml的新App_代码文件夹文件中。如何将lambda表达式传递到这里,然后使用它
@using System.Security.Policy
@using System.Web.Mvc.Html
@helper DynamicLookup(LAMBDAEXPR, CtrlId, Controller, Method) {
@Html.HiddenFor(LAMBDAEXPR)
<input id="txtDelegatedToLookup" type="text" />
@Html.ValidationMessageFor(LAMBDAEXPR)
<script type="text/javascript">
$(document).ready(function () {
InitLookup(txtCtrlId, idCtrlId, '@Url.Action(Controller, Method)');
});
</script>
}
@使用System.Security.Policy
@使用System.Web.Mvc.Html
@帮助器DynamicLookup(LAMBDAEXPR、CtrlId、控制器、方法){
@Html.HiddenFor(LAMBDAEXPR)
@Html.ValidationMessageFor(LAMBDAEXPR)
$(文档).ready(函数(){
InitLookup(txtCtrlId,idCtrlId,“@Url.Action(Controller,Method)”;
});
}
如果要封装javascript部分,可以创建一个HtmlHelper
,以生成所需的内容
一个人的长相示例如下:
public static MvcHtmlString DynamicLookupFor(this HtmlHelper htmlHelper, string txtCtrlId, string idCtrlId, string controllerName, string actionName)
{
// create script tag
var script = new TagBuilder("script");
// generate script content
var result = new StringBuilder();
result.AppendLine("$(document).ready(function () {");
result.Append("InitLookup(");
result.Append("'" + txtCtrlId + "',");
result.Append("'" + idCtrlId + "',");
// generate action link
var url = new UrlHelper(HttpContext.Current.Request.RequestContext);
result.Append("'" + url.Action(actionName, controllerName));
result.AppendLine("'});");
script.InnerHtml = result.ToString();
return MvcHtmlString.Create(script.ToString());
}
在视图中,可以按如下方式调用帮助器:
@Html.DynamicLookupFor("#txtDelegatedToLookup", "#Delegated_To_ID", "ContactLookup", "marMIS")
不要忘记在视图文件夹web.config中注册帮助程序:
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="Names Space Of Helper"/>
</namespaces>
好的,这是我最后做的。它确实工作得非常好!它将来需要一点润色,并且它为扩展这一点敞开了大门。例如,控件进行验证,但它不会按照我验证的其余部分对自身着色,而只是显示文本验证消息 该功能被称为这样
@Html.CustomLookupFor(m => m.Task_History.Delegated_To_ID, "txtDelegatedToLookup", @Url.Action("ContactLookup", "marMIS"), new { width = "250px" })
…并且需要在razor视图页面顶部使用语句
@using Custom.MVC.Helpers;
顺便说一句,有两件事。。。
jQuery1.7.2+和jQueryUI1.8.16+就是我在开发这个时使用的!
此外,下面第一个代码部分中的功能还包括
代码中的javascript功能,以及包含原始
javascript代码格式很好
然后在后台有两段代码。这里的第一段是关于我的初始问题,我试图开发的可重用代码。下面的第二段是服务器上的控制器方法
using System;
using System.Linq.Expressions;
using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
namespace Custom.MVC.Helpers
{
public static class CustomHtmlHelperExtensions
{
public static MvcHtmlString CustomLookupFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> exp, string id, string url, object options)
{
var hidCtrlId = id + "_id";
//Options
var opt = new RouteValueDictionary(options);
var textBoxWidth = (opt["width"] != null) ? opt["width"].ToString() : "";
var textBoxVisibility = (opt["visibility"] != null) ? opt["visibility"].ToString() : "";
//Construct the script fired when the document is fully loaded
var sbScript = new StringBuilder();
sbScript.Append("<script type='text/javascript'>");
sbScript.Append(" function InitDynamicLookupFor(e,f){var g='#'+e;var h='#'+e+'_id';$(g).click(function(){$(g).val('');$(h).val('');$(h).trigger('change')});$(g).autocomplete({minLength:3,delay:100,autoFocus:true,autofill:true,mustMatch:true,matchContains:true,width:220,source:function(c,d){$.ajax({url:f,type:'POST',dataType:'json',data:{searchId:0,searchTerm:c.term,searchLimit:10},success:function(b){d($.map(b,function(a){return{id:a.id,value:a.value}}))}})},create:function(b,c){if($(h).val()!=''){$.ajax({url:f,type:'POST',dataType:'json',data:{searchId:$(h).val(),searchTerm:'',searchLimit:1},success:function(a){$(g).val(a[0].value);$(g).removeClass('DynamicLookupForNotSelected');$(g).addClass('DynamicLookupForSelected')}})}},select:function(a,b){$(h).val(b.item.id);$(g).val(b.item.value);$(g).removeClass('DynamicLookupForNotSelected');$(g).addClass('DynamicLookupForSelected');$(h).trigger('change');return false},open:function(a,b){$(h).val(null);$(g).removeClass('DynamicLookupForSelected');$(g).addClass('DynamicLookupForNotSelected')}});if($(h).val()==''){$(g).val('Type here to search!');$(g).removeClass('DynamicLookupForSelected');$(g).addClass('DynamicLookupForNotSelected')}}");
sbScript.Append(" ");
sbScript.Append(" $(document).ready(function () {");
sbScript.Append(" InitDynamicLookupFor('" + id + "', '" + url + "');");
sbScript.Append(" });");
sbScript.Append("</script>");
//Construct the HTML controls for the DynamicLookup and its validation
var sbCtrls = new StringBuilder();
sbCtrls.Append(html.HiddenFor(exp, new { id=hidCtrlId }));
sbCtrls.Append("<input id='" + id + "' type='text' style='width:" + textBoxWidth + "; visibility:" + textBoxVisibility + ";' />");
sbCtrls.Append(html.ValidationMessageFor(exp));
//Return the lot back to the interface
var retString = sbScript.ToString() + sbCtrls.ToString();
return new MvcHtmlString(retString);
}
}
}
//*** This is the original javascript code before it is minified for use above! DON'T DELETE! ***
//
// function InitDynamicLookupFor(textBox, url) {
// var $textBox = '#' + textBox;
// var $hiddenId = '#' + textBox + '_id';
// $($textBox).click(function () {
// $($textBox).val('');
// $($hiddenId).val('');
// $($hiddenId).trigger('change');
// });
// $($textBox).autocomplete({
// minLength: 3,
// delay: 100,
// autoFocus: true,
// autofill: true,
// mustMatch: true,
// matchContains: true,
// width: 220,
// source: function (request, response) {
// $.ajax({
// url: url, type: 'POST', dataType: 'json',
// data: { searchId: 0, searchTerm: request.term, searchLimit: 10 },
// success: function (data) {
// response($.map(data, function (item) {
// return {
// id: item.id,
// value: item.value
// };
// }));
// }
// });
// },
// create: function (event, ui) {
// if ($($hiddenId).val() != '') {
// $.ajax({
// url: url, type: 'POST', dataType: 'json',
// data: { searchId: $($hiddenId).val(), searchTerm: '', searchLimit: 1 },
// success: function (data) {
// $($textBox).val(data[0].value);
// $($textBox).removeClass('DynamicLookupForNotSelected');
// $($textBox).addClass('DynamicLookupForSelected');
// }
// });
// }
// },
// select: function (event, ui) {
// $($hiddenId).val(ui.item.id);
// $($textBox).val(ui.item.value);
// $($textBox).removeClass('DynamicLookupForNotSelected');
// $($textBox).addClass('DynamicLookupForSelected');
// $($hiddenId).trigger('change');
// return false;
// },
// open: function (event, ui) {
// $($hiddenId).val(null);
// $($textBox).removeClass('DynamicLookupForSelected');
// $($textBox).addClass('DynamicLookupForNotSelected');
// }
// });
// //If no value selected by now, indicate to the user how to use the control
// if ($($hiddenId).val() == '') {
// $($textBox).val('Type here to search!');
// $($textBox).removeClass('DynamicLookupForSelected');
// $($textBox).addClass('DynamicLookupForNotSelected');
// }
//}
使用系统;
使用System.Linq.Expressions;
使用系统文本;
使用System.Web.Mvc;
使用System.Web.Mvc.Html;
使用System.Web.Routing;
命名空间Custom.MVC.Helpers
{
公共静态类CustomHtmlHelperExtensions
{
公共静态MvcHtmlString CustomLookupFor(此HtmlHelper html、表达式表达式、字符串id、字符串url、对象选项)
{
var hidctrid=id+“_id”;
//选择权
var opt=新的RouteValueDictionary(选项);
var textBoxWidth=(opt[“width”]!=null)?opt[“width”]。ToString():“”;
var textBoxVisibility=(opt[“visibility”]!=null)?opt[“visibility”]。ToString():“”;
//构造文档完全加载时激发的脚本
var sbScript=新的StringBuilder();
sbScript.Append(“”);
sbScript.Append(“函数InitDynamicLookupFor(e,f){var g='#'+e;var h='#'+e+''u id'$(g).单击(函数(){$(g).val(''';$(h).val('');(h).触发器('change')},(g).自动完成({minLength:3,延迟:100,自动聚焦:true,自动填充:true,mustMatch:true,matchContains:true,matchContains:true,width,source:220,源:函数(c,d){url:f),数据类型:},数据类型:{searchId:0,searchTerm:c.term,searchLimit:10},成功:函数(b){d($.map(b,函数(a){return{id:a.id,value:a.value}}}}}}},创建:函数(b,c){if($(h).val()!''{$.ajax({url:f,类型:'POST',数据类型:'json',searchId:$(h).val(),数据:{searchId:$.val(),searchTerm:'',searchLimit 1},成功:函数(a){(a){(h).val().val()).0.).ClovecUplass;';$(g).addClass('DynamicLookupForSelected')}}},选择:函数(a,b){$(h).val(b.item.id);$(g).val(b.item.value);$(g).removeClass('DynamicLookupForNotSelected');$(g).addClass('DynamicLookupForSelected');$(h).触发器('change');返回false},打开:函数(a,b){$(h).val(null);$(g).removeClass('DynamicLookupForSelected');$(g).addClass('DynamicLookupForSelected');$(g)('DynamicLookupForNotSelected')};if($(h).val()=''{$(g).val('Type here to search!');$(g).removeClass('DynamicLookupForSelected');$(g).addClass('DynamicLookupForNotSelected')});
sbScript.Append(“”);
追加(“$(document).ready(函数(){”);
追加(“InitDynamicLookupFor(““+id+”,“+url+”);”;
sbScript.Append(“}”);”;
sbScript.Append(“”);
//为DynamicLookup及其验证构造HTML控件
var sbCtrls=新的StringBuilder();
Append(html.HiddenFor(exp,new{id=hidCtrlId}));
sbCtrls.追加(“”);
追加(html.ValidationMessageFor(exp));
//将批次返回到接口
var retString=sbScript.ToString()+sbCtrls.ToString();
返回新的MvcHtmlString(retString);
}
}
}
//***这是在缩小以供上面使用之前的原始javascript代码!不要删除***
//
//函数InitDynamicLookupFor(文本框,url){
//var$textBox='#'+textBox;
//var$hiddenId='#'+textBox+'#u id';
//$($文本框)。单击(函数(){
//$($textBox).val(“”);
/
using System;
using System.Linq.Expressions;
using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
namespace Custom.MVC.Helpers
{
public static class CustomHtmlHelperExtensions
{
public static MvcHtmlString CustomLookupFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> exp, string id, string url, object options)
{
var hidCtrlId = id + "_id";
//Options
var opt = new RouteValueDictionary(options);
var textBoxWidth = (opt["width"] != null) ? opt["width"].ToString() : "";
var textBoxVisibility = (opt["visibility"] != null) ? opt["visibility"].ToString() : "";
//Construct the script fired when the document is fully loaded
var sbScript = new StringBuilder();
sbScript.Append("<script type='text/javascript'>");
sbScript.Append(" function InitDynamicLookupFor(e,f){var g='#'+e;var h='#'+e+'_id';$(g).click(function(){$(g).val('');$(h).val('');$(h).trigger('change')});$(g).autocomplete({minLength:3,delay:100,autoFocus:true,autofill:true,mustMatch:true,matchContains:true,width:220,source:function(c,d){$.ajax({url:f,type:'POST',dataType:'json',data:{searchId:0,searchTerm:c.term,searchLimit:10},success:function(b){d($.map(b,function(a){return{id:a.id,value:a.value}}))}})},create:function(b,c){if($(h).val()!=''){$.ajax({url:f,type:'POST',dataType:'json',data:{searchId:$(h).val(),searchTerm:'',searchLimit:1},success:function(a){$(g).val(a[0].value);$(g).removeClass('DynamicLookupForNotSelected');$(g).addClass('DynamicLookupForSelected')}})}},select:function(a,b){$(h).val(b.item.id);$(g).val(b.item.value);$(g).removeClass('DynamicLookupForNotSelected');$(g).addClass('DynamicLookupForSelected');$(h).trigger('change');return false},open:function(a,b){$(h).val(null);$(g).removeClass('DynamicLookupForSelected');$(g).addClass('DynamicLookupForNotSelected')}});if($(h).val()==''){$(g).val('Type here to search!');$(g).removeClass('DynamicLookupForSelected');$(g).addClass('DynamicLookupForNotSelected')}}");
sbScript.Append(" ");
sbScript.Append(" $(document).ready(function () {");
sbScript.Append(" InitDynamicLookupFor('" + id + "', '" + url + "');");
sbScript.Append(" });");
sbScript.Append("</script>");
//Construct the HTML controls for the DynamicLookup and its validation
var sbCtrls = new StringBuilder();
sbCtrls.Append(html.HiddenFor(exp, new { id=hidCtrlId }));
sbCtrls.Append("<input id='" + id + "' type='text' style='width:" + textBoxWidth + "; visibility:" + textBoxVisibility + ";' />");
sbCtrls.Append(html.ValidationMessageFor(exp));
//Return the lot back to the interface
var retString = sbScript.ToString() + sbCtrls.ToString();
return new MvcHtmlString(retString);
}
}
}
//*** This is the original javascript code before it is minified for use above! DON'T DELETE! ***
//
// function InitDynamicLookupFor(textBox, url) {
// var $textBox = '#' + textBox;
// var $hiddenId = '#' + textBox + '_id';
// $($textBox).click(function () {
// $($textBox).val('');
// $($hiddenId).val('');
// $($hiddenId).trigger('change');
// });
// $($textBox).autocomplete({
// minLength: 3,
// delay: 100,
// autoFocus: true,
// autofill: true,
// mustMatch: true,
// matchContains: true,
// width: 220,
// source: function (request, response) {
// $.ajax({
// url: url, type: 'POST', dataType: 'json',
// data: { searchId: 0, searchTerm: request.term, searchLimit: 10 },
// success: function (data) {
// response($.map(data, function (item) {
// return {
// id: item.id,
// value: item.value
// };
// }));
// }
// });
// },
// create: function (event, ui) {
// if ($($hiddenId).val() != '') {
// $.ajax({
// url: url, type: 'POST', dataType: 'json',
// data: { searchId: $($hiddenId).val(), searchTerm: '', searchLimit: 1 },
// success: function (data) {
// $($textBox).val(data[0].value);
// $($textBox).removeClass('DynamicLookupForNotSelected');
// $($textBox).addClass('DynamicLookupForSelected');
// }
// });
// }
// },
// select: function (event, ui) {
// $($hiddenId).val(ui.item.id);
// $($textBox).val(ui.item.value);
// $($textBox).removeClass('DynamicLookupForNotSelected');
// $($textBox).addClass('DynamicLookupForSelected');
// $($hiddenId).trigger('change');
// return false;
// },
// open: function (event, ui) {
// $($hiddenId).val(null);
// $($textBox).removeClass('DynamicLookupForSelected');
// $($textBox).addClass('DynamicLookupForNotSelected');
// }
// });
// //If no value selected by now, indicate to the user how to use the control
// if ($($hiddenId).val() == '') {
// $($textBox).val('Type here to search!');
// $($textBox).removeClass('DynamicLookupForSelected');
// $($textBox).addClass('DynamicLookupForNotSelected');
// }
//}
public JsonResult ContactLookup(int searchId, string searchTerm, int searchLimit)
{
//Prepare search filter from criteria entered
var p = PredicateBuilder.True<vw_Contact_Verbose>();
if (searchId != 0) p = p.And(x => x.Contact_ID == searchId);
if (searchTerm != "") p = p.And(x => x.Fullname.Contains(searchTerm));
//Grab data
var results =
(from x in _mDb.ent.vw_Contact_Verbose.AsExpandable().Where(p).OrderBy("Fullname Desc").Take(searchLimit)
select new { id = x.Contact_ID, value = x.Fullname + " (" + x.Company + ")" }).ToArray();
return Json(results, JsonRequestBehavior.AllowGet);
}