Question

我正在寻求创建一个可重复使用的＆＃34;员工查找＆＃34;控制。

注意：我假设局部视图是最好的方法。

我想要页面上的多个按钮
每个按钮都会调用PartialView，每个按钮都会有一个特定的文本框
每个部分将包含多个结果（项目）
点击其中一个结果后，我想填充按钮的文本框，进行调用，结果为

我怎么能这样做，因为页面会有多个按钮和文本框？

Answer 1

此控件需要能够通过多个按钮调用

那么，那些按钮会调用一个动作来渲染具有这些结果的部分？

我看到了多种方法。最简单的方法是：

<button id="btn1" class="btns" data-target="txt1" type="button">A</button>
<button id="btn2" class="btns" data-target="txt2" type="button">B</button>

<input type="text" id="txt1" />
<input type="text" id="txt2" />

<div id="render">

</div>

<script>
    var ajaxActive = false;

    $(function() {
        $(".btns").on('click', function () { // Bind the onclick of the button, so any button with this class may call the following function
            var _button = $(this);
            getItems(_button);
        });
    });

    function getItems(_button) {
        var bind = function (_button, results) {
            $("#render").empty();
            $("#render").append(results); // Append the partialview to the current view's div

            $("#render .itemResult").on('click', function () { // Bind the onclick of the result
                var resultValue = $(this).text(); // Or any other value that come from the result
                var targetId = "#" + _button.data('target'); // Id of the input (Target) which comes from the clicked button

                $(targetId).val(resultValue); // Change the input target value with the result one
            });
        };

        if (ajaxActive) {
            $.get('/Controller/Action') // Get the partialview 
           .done(function (results) {
               bind(_button, results);
           });
        }
        else {
            var results = simulateCall(); // Get the results
            bind(_button, results);
        }
    }

    function simulateCall() { // Simulate a call to the server
        return "<div class='items'> <div class='itemResult'>ABC</div> <div class='itemResult'>DEF</div> </div>";
    }
</script>

PS：这是一个有效的demo

请记住，我设置了某种“调用”来模拟它进入数据库

MVC5部分视图示例

1 个答案: