需要MVC2 / MVC3 Html Helper或Editor Template解决方案

时间:2012-05-22 13:31:59

标签: 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_To_ID', '@Url.Action("ContactLookup", "marMIS")');
       });
   </script>
   @Html.HiddenFor(m => m.Delegated_To_ID)
   <input id="txtDelegatedToLookup" type="text" />

理想情况下,我想将其简化为更简洁,更易于使用的解决方案,其中javascript InitLookup()是动态创建并封装在其中的,可能如下所示......

@Html.DynamicLookupFor(m => m.Delegated_To_ID, "ContactLookup", "marMIS")

...其中“marMIS”是控制器,“ContactLookup”是控制器方法。这些是在查找期间用于获取数据的地址。

我尝试在 / Views / Shared / EditorTemplates 文件夹中创建一个名为DynamicLookup的编辑模板,但在使用 @ Html.DynamicLookup(...

这个人的任何人?干杯!

------------ App_Code建议如下!原始问题的附录! -------------------------

好的,所以我将我的代码复制到名为CustomHelpers.cshtml的新App_Code文件夹文件中。如何将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>            
}

2 个答案:

答案 0 :(得分:0)

如果要封装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")

不要忘记在Views文件夹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>

答案 1 :(得分:0)

好的,这就是我最终做的事情。它确实非常好用!它将来需要一点点润色,它会让门敞开以延伸一点。例如,控件验证,但它不会根据我的其余验证自行着色,而只是显示文本验证消息。

该功能被称为......

@Html.CustomLookupFor(m => m.Task_History.Delegated_To_ID, "txtDelegatedToLookup", @Url.Action("ContactLookup", "marMIS"), new { width = "250px" })

...并且需要在剃刀视图页面顶部使用using语句...

@using Custom.MVC.Helpers;
顺便说一句,两件事......      jquery 1.7.2+和jquery ui 1.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');
            //    }
            //}

服务器上的控制器方法......

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);
    }  

我确实希望这个可重复使用的代码对我而言对任何人都有用。这肯定使我的代码在剃刀视图中不那么冗长。