MVC5 局部视图示例

Question

我正在寻求创建一个可重复使用的 "employee lookup" 控件。

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

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

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

Answer 1

This control needs to be able to be called by multiple buttons

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

我看到有多种方法可以做到这一点。最简单的方法是：

<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

请记住，我放置了某种 "call" 来模拟它进入数据库

MVC5 局部视图示例

MVC5 Partial View Example

asp.net-mvc

asp.net-mvc-partialview