2017-05-05 7 views
0

以下のコードは機能しますが、正しいラジオボタンの値を渡すために正しいhiddenfieldを取得する方法を区別できません。同じ名前の複数の隠しフィールドがあり、jQueryは最初のradioAccessIdを取得します。jQueryと同じ名前の複数の隠しフィールドを使用したMVC Razorラジオボタン

listaccessholdスパンごとに割り当てられた非表示フィールドを取得する方法についてのご意見はありますか?

<div class="row"> 
    <div class="col-xs-12"> 
    <ul class="list-unstyled margin-top-10 margin-bottom-10"> 
     @For Each access As AccessLevel In Model.AssignedAccessLevels 
     If access.AccessLevelId <> 0 Then 
     @ 
     <span class="[email protected]"> 
      <li> 
       <div class="input-group"> 
        @access.AccessLevelName 
        <div class="icheck-inline"> 
         @code 
         If access.AccessFlag = "Yes" Then 
         @<label> 
          <input checked type="radio" name="[email protected]" value="Yes" group="[email protected]"> Yes 
         </label> 
         @<label> 
          <input type="radio" name="[email protected]" value="No" group="[email protected]"> No 
         </label> 
         Else 
         @<label> 
          <input type="radio" name="[email protected]" value="Yes" group="[email protected]"> Yes 
         </label> 
         @<label> 
          <input checked type="radio" name="[email protected]" value="No" group="[email protected]"> No 
         </label> 
         End If 
         End Code 
        </div> 
        <input type="hidden" id="radioAccessId" value="@access.AccessLevelId" /> 
       </div> 
      </li> 
     </span> 
     End If 
     Next 
    </ul> 
    </div> 
</div> 

レイザーが生成されます:

<div class="row"> 
    <div class="col-xs-12"> 
    <ul class="list-unstyled margin-top-10 margin-bottom-10"> 
     <span class="listaccessholder-353"> 
      <li> 
       <div class="input-group"> 
        Epi 
        <div class="icheck-inline"> 
         <label> 
          <input type="radio" name="AccessFlag-353" value="Yes" group="AccessFlag-353"> Yes 
         </label> 
         <label> 
          <input checked type="radio" name="AccessFlag-353" value="No" group="AccessFlag-353"> No 
         </label> 

        </div> 
        <input type="hidden" id="radioAccessId" value="353" /> 
       </div> 
      </li> 
     </span> 
     <span class="listaccessholder-388"> 
      <li> 
       <div class="input-group"> 
        System Administrator 
        <div class="icheck-inline"> 
         <label> 
          <input checked type="radio" name="AccessFlag-388" value="Yes" group="AccessFlag-388"> Yes 
         </label> 
         <label> 
          <input type="radio" name="AccessFlag-388" value="No" group="AccessFlag-388"> No 
         </label> 

        </div> 
        <input type="hidden" id="radioAccessId" value="388" /> 
       </div> 
      </li> 
     </span> 
     <span class="listaccessholder-392"> 
      <li> 
       <div class="input-group"> 
        Site Administrator 
        <div class="icheck-inline"> 
         <label> 
          <input type="radio" name="AccessFlag-392" value="Yes" group="AccessFlag-392"> Yes 
         </label> 
         <label> 
          <input checked type="radio" name="AccessFlag-392" value="No" group="AccessFlag-392"> No 
         </label> 

        </div> 
        <input type="hidden" id="radioAccessId" value="392" /> 
       </div> 
      </li> 
     </span> 
     <input type="hidden" id="radioviewId" value="6" /> 
    </ul> 
    </div> 
</div> 

をjQueryのは、私の目標は、YES/NOでセクションを取得し、値を渡すことでしたが、私はaccessIdせずにセクションを取得することはできません。各アクセスIDは、非表示フィールド内に保存され、同じ名前を持ちます。

$(function() { 
// Someone has clicked one of the access radio buttons 
var accessId = $(this).find('#radioAccessId').val(); 
var listaccessholder = 'span.listaccessholder-' + accessId; 
var radioViewId = $(this).find('#viewId').val(); 
$(listaccessholder).click(function() { 
    var accessFlag = ""; 
    $(this).find('input[type=radio]:checked').each(function() { 
     accessFlag = $(this).val(); 
    }); 
    // Make a viewModel instance 
    var viewModel = new Object(); 
    viewModel.viewId = radioViewId; 
    viewModel.AccessId = accessId; 
    viewModel.AccessFlag = accessFlag; 

    //Ajax call to post the viewModel to the controller 
    var strung = JSON.stringify(viewModel); 

    $.ajax({ 
     url: app_base + 'Menu/UpdateAccess', 
     type: 'POST', 
     data: strung, 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      ShowUserMessage("Access updated"); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      ShowUserMessage("Error: " + xhr.status + " " + thrownError); 
     } 
    }); 
    }) 
}); 

私はこのアプローチに前進したいと思いますが、私はどのようにSOFコミュニティからのいくつかのアドバイスを必要としています。

コントローラ

<HttpPost> 
    Public Sub UpdateAccess(viewModel As AjaxAccessViewModel) 
     If Request.IsAjaxRequest() Then 
      Dim status As New Boolean 
      Try 
       status = _menuService.UpdateAccessFlag(viewModel.ViewId, viewModel.AccessId, viewModel.AccessFlag, GetUserInfo.UserID) 
      Catch ex As Exception 
       'TempData("message") = New GenericMessage() With 
       ' {.Message = "Update failed.", 
       '  .MessageType = GenericMessages.danger} 
      End Try 
      If (status = True) Then 
       'TempData("message") = New GenericMessage() With 
       ' {.Message = "Successfully updated the access flag.", 
       '  .MessageType = GenericMessages.success} 
      End If 
     End If 
    End Sub 

答えて

1

可能な方法の1つは、ちょうどラジオ入力の属性としてビューのIDとアクセスIDを置くことです。このようにして、異なるレベルから値を選択することを心配する必要はありません。

$(function(){ 
 
    $('input[type="radio"]').click(function(){ 
 
    var o = {}; 
 
    o.viewId = $(this).data("viewid"); 
 
    o.accessId = $(this).data("accessid"); 
 
    o.accessFlag = $(this).val(); 
 
    alert(JSON.stringify(o)); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-12"> 
 
    <ul class="list-unstyled margin-top-10 margin-bottom-10"> 
 
     <span class="listaccessholder-353"> 
 
      <li> 
 
       <div class="input-group"> 
 
        Epi 
 
        <div class="icheck-inline"> 
 
         <label> 
 
          <input type="radio" value="Yes" data-accessid="353" data-viewid="6"> Yes 
 
         </label> 
 
         <label> 
 
          <input checked type="radio" value="No" data-accessid="353" data-viewid="6"> No 
 
         </label> 
 

 
        </div> 
 
       </div> 
 
      </li> 
 
     </span> 
 
     <span class="listaccessholder-388"> 
 
      <li> 
 
       <div class="input-group"> 
 
        System Administrator 
 
        <div class="icheck-inline"> 
 
         <label> 
 
          <input checked type="radio" value="Yes" data-accessid="392" data-viewid="6"> Yes 
 
         </label> 
 
         <label> 
 
          <input type="radio" value="No" data-accessid="388" data-viewid="6"> No 
 
         </label> 
 

 
        </div> 
 
        
 
       </div> 
 
      </li> 
 
     </span> 
 
     <span class="listaccessholder-392"> 
 
      <li> 
 
       <div class="input-group"> 
 
        Site Administrator 
 
        <div class="icheck-inline"> 
 
         <label> 
 
          <input type="radio" value="Yes" data-accessid="392" data-viewid="6"> Yes 
 
         </label> 
 
         <label> 
 
          <input checked type="radio" value="No" data-accessid="392" data-viewid="6"> No 
 
         </label> 
 

 
        </div> 
 
       </div> 
 
      </li> 
 
     </span> 
 
    </ul> 
 
    </div> 
 
</div>

+0

私の論理的なデッドロックから私を解放シンプルでエレガントな答えを。ありがとうnoriMonsta – JoshYates1980

関連する問題