MVC5 Partial View Example

Question

I am seeking to create a reusable "employee lookup" control.

Note:I am assuming that a partial view is the best way to go.

1. I want multiple buttons on the page
2. Each button will call a PartialView and each button will have a specific textbox
3. Each partial will contain multiple Results (items)
4. On clicking one of the results I want to populate the button's textbox, that made the call, with the result

How am i able to do this, since the page will have multiple buttons and textboxes?

Answer 1

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

So, those buttons call an action which will render the partial which has those results?

I'm seeing multiple ways to do this. The easiest way is:

<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: Here is a working demo

Keep in mind that i placed some sort of "call" to simulate it going to the database