web-dev-qa-db-de.com

Übergeben Sie das Modell mit Jquery / Ajax an den Controller

Ich versuche, mein Modell mit JQuery/Ajax an einen Controller zu übergeben. Ich bin nicht sicher, wie ich das richtig machen soll. Bisher habe ich versucht mit Url.Action aber das Modell ist leer.

Hinweis: Keiner der doppelten Threads im Stapelüberlauf scheint mit ASP.NET 5 MVC 6 zu funktionieren.

Aussicht:

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

Regler:

 [HttpGet]
 public PartialViewResult IndexPartial(DashBoardViewModel m)
 {
      // Do stuff with my model
      return PartialView("_IndexPartial");
 }
25
Reafidy

Ihre Aktionsmethode IndexPartial hat anscheinend ein Argument, das ein komplexes Objekt ist. Wenn Sie eine Menge Daten (komplexes Objekt) übergeben, ist es möglicherweise eine gute Idee, Ihre Aktionsmethode in eine HttpPost - Aktionsmethode zu konvertieren und jQuery post zu verwenden, um Daten in diese zu posten. GET hat Einschränkungen für den Wert der Abfragezeichenfolge.

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

Ihr Skript sollte sein

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);
});

Angenommen, Name und Location sind Eigenschaften Ihrer DashboardViewModel-Klasse und SomeDivToShowTheResult ist die ID eines Divs auf Ihrer Seite, von dem Sie den Inhalt laden möchten die Teilansicht.

Komplexe Objekte versenden?

Sie können komplexere Objekte in js erstellen, wenn Sie möchten. Die Modellbindung funktioniert, solange Ihre Struktur mit der viewmodel-Klasse übereinstimmt

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);
});

Damit das obige js-Modell in Ihren Methodenparameter umgewandelt wird, sollte Ihr Ansichtsmodell so aussehen.

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

Geben Sie in Ihrer Aktionsmethode [FromBody] An.

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

Verwenden Sie das folgende 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;
    });
});

und den folgenden Code auf Ihrem Controller:

[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

Wie in anderen Antworten vorgeschlagen, ist es wahrscheinlich am einfachsten, die Formulardaten an den Controller zu "POSTEN". Wenn Sie ein gesamtes Modell/Formular übergeben müssen, können Sie dies einfach mit serialize() tun, z.

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

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

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

Ihr Controller könnte also ein Ansichtsmodell als Parameter haben, z.

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

Alternativ können Sie Folgendes tun, wenn Sie nur bestimmte Werte veröffentlichen möchten:

$('#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
    });
});

Mit einem Controller wie:

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