MVC5パーシャルビューの例

Question

私は再利用可能な "社員参照"コントロールを作成しようとしています。

注：私は、部分的なビューが最善の方法であると仮定しています。

1. は、私は各ボタンがPartialViewを呼び出すと、各ボタンが特定のテキストボックスを持っています
2. ページに複数のボタンをしたい
のいずれかをクリックすると、複数の結果（アイテム）
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

は、私はそれがデータベース