2016-03-31 6 views
1

スタックオーバフローコミュニティ。私はjquery ajax呼び出しで最初のアプリケーションを構築していましたが、私は顧客情報を取得することに苦労しています。コントローラのアクションメソッドから部分的に渡され、モーダルダイアログに表示されます。

私は.load関数を使用すると、期待通りに動作しますが、コントローラのアクションメソッドにパラメータを渡すことはできません。それから私は$ .ajaxを使用しようとしましたが、まだ運がありません。

私のコードを投稿して、私の問題をよりよく理解できるようにしてください。このビューで

私のメインビュー

@model IEnumerable<App.AppService.Customer> 


@{ 
    ViewBag.Title = "GetCustomers"; 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var customerID = 0; 
     $("input[type=button]").click(function() { 
      customerID = this.id; 
      debugger; 
      $("#dialogDiv").dialog("open"); 
     }); 

     $(function() { 
      $('#dialogDiv').dialog({ 
       autoOpen: false, 
       width: 400, 
       resizable: false, 
       title: 'Update customer information', 
       modal: true, 
       open: function() { 
        $.ajax({ 
         url: '@Url.Action("GetCustomer", "Customer")', 
         contentType: 'application/json; charset=utf-8', 
         method: "get", 
         data: JSON.stringify({ customerId : customerID }), 
         dataType: 'html' 
        }); 
       }, 

       buttons: { 
        "Close": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     }); 
    }); 
</script> 

<h2>GetCustomers</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 

<div class="row"> 
    <div class="col-md-offset-1 col-md-10"> 


     <table class="table table-condensed table-striped"> 
      <tr> 
       <th class="text-center"> 
        @Html.DisplayNameFor(model => model.CustomerName) 
       </th> 
       <th class="text-center"> 
        @Html.DisplayNameFor(model => model.Company) 
       </th> 
       <th class="text-center"> 
        @Html.DisplayNameFor(model => model.Email) 
       </th> 
       <th class="text-center"> 
        @Html.DisplayNameFor(model => model.PhoneNumber) 
       </th> 
       <th></th> 
      </tr> 

      @foreach (var item in Model) 
      { 
       <tr id="@item.CustomerID"> 
        <td> 
         @Html.DisplayFor(modelItem => item.CustomerName) 
        </td> 
        <td> 
         @Html.DisplayFor(modelItem => item.Company) 
        </td> 
        <td> 
         @Html.DisplayFor(modelItem => item.Email) 
        </td> 
        <td> 
         @Html.DisplayFor(modelItem => item.PhoneNumber) 
        </td> 
        <td> 
         <input type="button" value="edit" id="@item.CustomerID" /> | 
         @Html.ActionLink("Delete", "Delete", new { id = item.CustomerID }) 
        </td> 
       </tr> 
      } 

     </table> 
    </div> 
</div> 
<div id="dialogDiv" title="Edit customer"> 
    <h3>Please wait ...</h3> 
</div> 

私はすべての顧客を検索し、編集ボタンをクリックしたときに、私は、コントローラのメソッドを呼び出し、モーダルダイアログの彼のIDで顧客を取得します。

[HttpGet] 
public ActionResult GetCustomer(int customerId) 
{ 
    Customer customer = repository.GetCustomerById(customerId); 
    return PartialView("_GetCustomerPartial", customer); 
} 

[HttpPost] 
public ActionResult GetCustomer(Customer customer) 
{ 
    if (repository.UpdateCustomer(customer)) 
    { 
     return RedirectToAction("GetCustomers"); 
    } 
    return HttpNotFound(); 
} 

そして、私の部分図:私はnull参照エラーを取得しています。このコードで

@model App.AppService.Customer 


@using (Html.BeginForm()) { 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>Customer</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Company) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Company) 
      @Html.ValidationMessageFor(model => model.Company) 
     </div> 

     @Html.HiddenFor(model => model.CustomerID) 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.CustomerName) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.CustomerName) 
      @Html.ValidationMessageFor(model => model.CustomerName) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Email) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Email) 
      @Html.ValidationMessageFor(model => model.Email) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.PhoneNumber) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.PhoneNumber) 
      @Html.ValidationMessageFor(model => model.PhoneNumber) 
     </div> 

     <p> 
      <input type="submit" value="Save" /> 
     </p> 
    </fieldset> 
} 

以下は私のコントローラActionMethodです。私はそれがパラメータがアクションメソッドに渡されないためだと思います。

パラメータを指定せずに(テストのためだけに)ロード関数を使用すると、完全に機能し、モーダルダイアログの部分ビューとして顧客オブジェクトを返します。

の作業コード:コントローラのアクションの変化に

$(document).ready(function() { 

     $("input[type=button]").click(function() { 
      var customerId = this.id; 
      debugger; 
      $("#dialogDiv").dialog("open"); 
     }); 

     $(function() { 
      $('#dialogDiv').dialog({ 
       autoOpen: false, 
       width: 400, 
       resizable: false, 
       title: 'Update customer information', 
       modal: true, 
       open: function() { 
        debugger; 
        $(this).load("@Url.Action("GetCustomer")"); 
       }, 
       buttons: { 
        "Close": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     }); 
    }); 

[HttpGet] 
public ActionResult GetCustomer() 
{ 
    Customer customer = repository.GetCustomerById(any int id); 
    return PartialView("_GetCustomerPartial", customer); 
} 

私は同じ作業の機能を実現したいのですが、パラメータを指定して、私はアクションメソッドをコントローラに渡すことができます。

私はthis投稿を通過しましたが、残念ながら解説者がコメントで提供した解決策を理解できませんでした。

ありがとうございます!

答えて

1

この問題を継続的に処理した後、私はついにそれを動作させました。以下は、解決策は以下のとおりです。私は間違った場所に$アヤックスコールを使用して、そしてJSON.stringifyがnull参照の例外を回避するために私を助け削除されたことをここで言及する

$("input[type=button]").click(function() { 
      var customerId = this.id; 
      $.ajax({ 
       url: '@Url.Action("GetCustomer","Customer")', 
       contentType: 'application/json; charset=utf-8', 
       method: "get", 
       data: ({ customerId: customerId }), 
       dataType: 'html', 
       success: function (result) { 
        $("#dialogDiv").dialog("open").html(result); 
       }, 
       error: function (jqXHR, exception) { 
        var msg = ''; 
        if (jqXHR.status === 0) { 
         msg = 'Not connect.\n Verify Network.'; 
        } else if (jqXHR.status == 404) { 
         msg = 'Requested page not found. [404]'; 
        } else if (jqXHR.status == 500) { 
         msg = 'Internal Server Error [500].'; 
        } else if (exception === 'parsererror') { 
         msg = 'Requested JSON parse failed.'; 
        } else if (exception === 'timeout') { 
         msg = 'Time out error.'; 
        } else if (exception === 'abort') { 
         msg = 'Ajax request aborted.'; 
        } else { 
         msg = 'Uncaught Error.\n' + jqXHR.responseText; 
        } 
        $("#output").html(msg); 
        $("#output").css("visibility", "visible"); 
       } 
      }); 
     }); 
     $(function() { 
      $('#dialogDiv').dialog({ 
       autoOpen: false, 
       width: 400, 
       resizable: false, 
       title: 'Update customer information', 
       modal: true, 
       buttons: { 
        "Close": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     }); 

主なポイントです。アクションメソッドからの戻り値の型はhtmlで、私はそのHTMLでダイアログdivを埋めただけで、すべてが魅力的に機能しました。

関連する問題