MVC5 Partial View Example - asp.net-mvc

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.
I want multiple buttons on the page
Each button will call a PartialView and each button will have a specific textbox
Each partial will contain multiple Results (items)
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