web-dev-qa-db-ja.com

Jquery / Ajaxを使用してモデルをコントローラーに渡す

JQuery/Ajaxを使用してモデルをコントローラーに渡そうとしていますが、これを正しく行う方法がわかりません。これまでUrl.Actionを使用してみましたが、モデルは空白です。

注：stackoverflowの重複スレッドはどれも、ASP.NET 5 MVC 6を使用して対処しているようには見えません。

見る：

$("#inpDateCompleted").change(function () {
        var url = '@(Url.Action("IndexPartial", "DashBoard", Model, null))';
        $("#DailyInvoiceItems").load(url);
});

コントローラ：

 [HttpGet]
 public PartialViewResult IndexPartial(DashBoardViewModel m)
 {
      // Do stuff with my model
      return PartialView("_IndexPartial");
 }
asp.net-mvcasp.net-coreasp.net-core-mvc
25
Reafidy

IndexPartialアクションメソッドには、複雑なオブジェクトである引数があるようです。大量のデータ（複雑なオブジェクト）を渡す場合、アクションメソッドをHttpPostアクションメソッドに変換し、jQuery postを使用してデータをポストすることをお勧めします。 GETには、クエリ文字列値に制限があります。

[HttpPost]
public PartialViewResult IndexPartial(DashboardViewModel m)
{
   //May be you want to pass the posted model to the parial view?
   return PartialView("_IndexPartial");
}

あなたのスクリプトは

var url = "@Url.Action("IndexPartial","YourControllerName")";

var model = { Name :"Shyju", Location:"Detroit"};

$.post(url, model, function(res){
   //res contains the markup returned by the partial view
   //You probably want to set that to some Div.
   $("#SomeDivToShowTheResult").html(res);
});

NameとLocationがDashboardViewModelクラスのプロパティであり、SomeDivToShowTheResultが部分ビューからのコンテンツをロードするページのdivのIDであると仮定します。

複雑なオブジェクトを送信していますか？

必要に応じて、jsでより複雑なオブジェクトを構築できます。モデルバインディングは、構造がviewmodelクラスと一致する限り機能します

var model = { Name :"Shyju", 
              Location:"Detroit", 
              Interests : ["Code","Coffee","Stackoverflow"]
            };

$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: url,
    contentType: "application/json"
}).done(function (res) {
    $("#SomeDivToShowTheResult").html(res);
});

上記のjsモデルをメソッドパラメーターに変換するには、ビューモデルは次のようになります。

public class DashboardViewModel
{
  public string Name {set;get;}
  public string Location {set;get;}
  public List<string> Interests {set;get;}
}

そして、アクションメソッドで、[FromBody]を指定します

[HttpPost]
public PartialViewResult IndexPartial([FromBody] DashboardViewModel m)
{
    return PartialView("_IndexPartial",m);
}
57
Shyju

次のJSを使用します。

$(document).ready(function () {
    $("#btnsubmit").click(function () {

             $.ajax({
                 type: "POST",
                 url: '/Plan/PlanManage',     //your action
                 data: $('#PlanForm').serialize(),   //your form name.it takes all the values of model               
                 dataType: 'json',
                 success: function (result) {
                     console.log(result);
                 }
             })
        return false;
    });
});

コントローラーの次のコード：

[HttpPost]
public string PlanManage(Plan objplan)  //model plan
{
}
8
kavita sharma
//C# class

public class DashBoardViewModel 
{
    public int Id { get; set;} 
    public decimal TotalSales { get; set;} 
    public string Url { get; set;} 
     public string MyDate{ get; set;} 
}

//JavaScript file
//Create dashboard.js file
$(document).ready(function () {

    // See the html on the View below
    $('.dashboardUrl').on('click', function(){
        var url = $(this).attr("href"); 
    });

    $("#inpDateCompleted").change(function () {   

        // Construct your view model to send to the controller
        // Pass viewModel to ajax function 

        // Date
        var myDate = $('.myDate').val();

        // IF YOU USE @Html.EditorFor(), the myDate is as below
        var myDate = $('#MyDate').val();
        var viewModel = { Id : 1, TotalSales: 50, Url: url, MyDate: myDate };


        $.ajax({
            type: 'GET',
            dataType: 'json',
            cache: false,
            url: '/Dashboard/IndexPartial',
            data: viewModel ,
            success: function (data, textStatus, jqXHR) {
                //Do Stuff 
                $("#DailyInvoiceItems").html(data.Id);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //Do Stuff or Nothing
            }
        });

    });
});

//ASP.NET 5 MVC 6 Controller
public class DashboardController {

    [HttpGet]
    public IActionResult IndexPartial(DashBoardViewModel viewModel )
    {
        // Do stuff with my model
        var model = new DashBoardViewModel {  Id = 23 /* Some more results here*/ };
        return Json(model);
    }
}

// MVC View 
// Include jQuerylibrary
// Include dashboard.js 
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="~/Scripts/dashboard.js"></script>
// If you want to capture your URL dynamically 

<div>
    <a class="dashboardUrl" href ="@Url.Action("IndexPartial","Dashboard")"> LinkText </a>
</div>
<div>
    <input class="myDate" type="text"/>
//OR
   @Html.EditorFor(model => model.MyDate) 
</div>
6
Julius Depulla

他の回答で提案されているように、おそらくフォームデータをコントローラーに「POST」するのが最も簡単です。モデル/フォーム全体を渡す必要がある場合は、serialize()を使用して簡単にこれを行うことができます。

$('#myform').on('submit', function(e){
    e.preventDefault();

    var formData = $(this).serialize();

    $.post('/student/update', formData, function(response){
         //Do something with response
    });
});

そのため、コントローラーには、パラメーターとしてビューモデルを含めることができます。

 [HttpPost]
 public JsonResult Update(StudentViewModel studentViewModel)
 {}

あるいは、特定の値を投稿するだけの場合は、次の操作を実行できます。

$('#myform').on('submit', function(e){
    e.preventDefault();

    var studentId = $(this).find('#Student_StudentId');
    var isActive = $(this).find('#Student_IsActive');

    $.post('/my/url', {studentId : studentId, isActive : isActive}, function(response){
         //Do something with response
    });
});

次のようなコントローラーを使用する場合：

     [HttpPost]
     public JsonResult Update(int studentId, bool isActive)
     {}
2
Rob