web-dev-qa-db-fra.com

Passer le modèle au contrôleur en utilisant Jquery / Ajax

J'essaie de transmettre mon modèle à un contrôleur utilisant JQuery/Ajax. Je ne sais pas comment procéder correctement. Jusqu'à présent, j'ai essayé d'utiliser Url.Action mais le modèle est vide.

Remarque: aucun des threads en double sur stackoverflow ne semble traiter avec ASP.NET 5 MVC 6.

Vue:

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

Manette:

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

On dirait que votre méthode d'action IndexPartial a un argument qui est un objet complexe. Si vous transmettez beaucoup de données (objet complexe), il peut être judicieux de convertir votre méthode d'action en une méthode d'action HttpPost et d'utiliser jQuery post pour y envoyer des données. GET a une limitation sur la valeur de la chaîne de requête.

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

Votre script devrait être

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

En supposant que Name et Location sont des propriétés de votre classe DashboardViewModel et que SomeDivToShowTheResult est l'identifiant d'un div de votre page d'où vous souhaitez charger le contenu provenant la vue partielle.

Envoi d'objets complexes?

Vous pouvez construire un objet plus complexe en js si vous le souhaitez. La liaison de modèle fonctionnera tant que votre structure correspond à la classe 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);
});

Pour que le modèle js ci-dessus soit transformé en paramètre de votre méthode, votre modèle de vue doit ressembler à ceci.

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

Et dans votre méthode d'action, spécifiez [FromBody]

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

Utilisez le JS suivant:

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

et le code suivant sur votre contrôleur:

[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

Comme suggéré dans d'autres réponses, il est probablement plus facile de "POST" transmettre les données de formulaire au contrôleur. Si vous avez besoin de transmettre un modèle/formulaire entier, vous pouvez facilement le faire avec serialize() par exemple.

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

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

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

Ainsi, votre contrôleur pourrait avoir un modèle de vue comme paramètre, par exemple.

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

Alternativement, si vous souhaitez simplement publier des valeurs spécifiques, vous pouvez le faire:

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

Avec un contrôleur comme:

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