Question

这是我的javascript代码：

<script type="text/javascript">
    $(document).ready(function() {

        var currentInput = '';
        var currentLabel = '';

        $("#userLookup").click(function() {
            var url = "<%= Url.Action( "ListAll" , "User") %>";
            currentInput = $("#User");
            currentLabel = $("#lblUser");
            openModal(url);
            return false;

        });

        $("#locationLookup").click(function() {
            var url = "<%= Url.Action( "ListAll" , "Location") %>";
            currentInput = $("#Location");
            currentLabel = $("#lblLocation");
            openModal(url);
            return false;
        });


        $(".selectable").live("click", function(e){
            currentInput.val($(this).attr('id'));
            var labelText = $(this).parent().parent().find('td').eq(2).html();
            currentLabel.html(labelText);
            $.fn.colorbox.close();  
            e.preventDefault();
        });

    });

    function openModal(url){
        $.fn.colorbox({
                href:url
                , open:true
                , width: "400px"
                , height: "300px" 
              });
    }
</script>

这是我的HTML

<table width = "100%">
     <tr>            
        <td>Asset User Id:</td>
        <td><%= Html.TextBox("User", Model.User, (object)new{style = "width:100px", maxLength="20"})%>
            <a id="userLookup" href="#">Lookup User</a>
        <label id="lblUser"></label>
        <%=Html.ValidationMessage("User")%></td>
    </tr>      
    <tr>            
        <td>Location Id:</td>
        <td><%= Html.TextBox("Location", Model.Location, (object)new{style = "width:100px", maxLength="20"})%>
            <a id="locationLookup" href="#">Lookup Location</a>
        <label id="lblLocation"></label>
        <%=Html.ValidationMessage("Location")%></td>
    </tr>         
</table>

我有更多的查找字段（我省略了）类似于上面列出的两个，我想看看是否有人可以帮我提出一个更清洁/干燥的方法来做这样的事情？

由于

Answer 1

你可以使用一种jquery插件来附加userLookup和locationLookup的点击处理程序。它可能需要3个参数：

URL
输入
标签

否则，你可以拥有一个需要4的函数（第一个是绑定点击处理程序的项目），并运行你上面的确切代码。

请不要超过顶部。如果您开始为一次性解决方案添加更多参数（例如，布尔值是否在顶部显示带有“x”或“close”的模态），那么可能只是让事情变得复杂。

Answer 2

我会将模态框的url添加到链接本身。然后，您只需向该链接添加一个类即可调用所需的功能。这也意味着您可以将JS放在外部文件中，并且您的JS不依赖于ASP.NET MVC Html辅助方法。

将您的html更改为：

<table width = "100%">
    <tr>            
        <td>Asset User Id:</td>
        <td>
            <%= Html.TextBox("User", Model.User, (object)new{style = "width:100px", maxLength="20"})%>
            <%= ActionLink("Lookup User", "ListAll", "User", null, new { class="lookup-link" }) %>
            <label id="lblUser"></label>
            <%=Html.ValidationMessage("User")%>
        </td>
    </tr>      
    <tr>            
        <td>Location Id:</td>
        <td>
            <%= Html.TextBox("Location", Model.Location, (object)new{style = "width:100px", maxLength="20"})%>
            <%= ActionLink("Lookup Location", "ListAll", "Location", null, new { class="lookup-link" }) %>
            <label id="lblLocation"></label>
            <%=Html.ValidationMessage("Location")%>
        </td>
    </tr>         
</table>

然后你可以简化你的jQuery：

var currentInput = '';
var currentLabel = '';

$(".lookup-link").click(function() {
    var url = $(this).attr("href");
    currentInput = $(this).siblings("input")[0];
    currentLabel = $(this).siblings("label")[0];
    openModal(url);
    return false;
});

我没有测试过这些代码，所以可能有一百万个错误。 ; - ）

HTHS，
查尔斯

Answer 3

如果使用约定来命名所有查找元素，则可以创建一个适用于所有实例的通用函数。

类似的东西：

    OpenLookupModal(lookupId)
    {
        var inputName = lookupId.id.substr(0, lookupId.id.indexOf('Lookup'); //take all of the id before the word "lookup"
        var currentInput = $("#" + inputName ));
        var currentLabel = $("#lbl" + inputName);
        openModal(url);
        return false;
    }

使用它：

$("#locationLookup").click(OpenLookupModal("#locationLookup"));

您甚至可以在一个声明中以“Lookup”结束所有id的click事件并将其绑定：

$("[id$='lookup']").click(OpenLookupModal(this));

警告：此代码未经测试，但希望它可以解决这个问题。

需要JQuery重构帮助

3 个答案: