MVC5 局部视图示例

Question

我正在寻求创建一个可重复使用的“员工查找”控件。

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

1. 我想要页面上有多个按钮
2. 每个按钮都会调用一个PartialView，每个按钮都有一个特定的文本框
3. 每个部分将包含多个结果（项目）
4. 单击其中一个结果时，我想填充按钮的文本框，该文本框进行调用，结果显示

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

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

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