如何在按下提交按鈕時將整個模型對象從視圖傳遞到jquery ajax調用的控制器動作？

Question

我已經這樣嘗試過：

Ajax呼叫：

<script>

    $("#Create").click(function () {
        var project=@Model;
        $.ajax({
            url: "/Projects/TempCreateProject",
            datatype: "text",
            type: "POST",
            data: JSON.stringify(project),
            success: function (data) {
                alert(data.message);
            },
            error: function () {
                // $("#testarea").html("ERROR");
                alert("Error");
            }
        });
    });

</script>

動作方式 ：

  [HttpPost]
         public ActionResult TempCreateProject(Project Project)
         {
             try
             {
                 var skill = _projectService.GetSkillSetById(Project.skillSetId);
                 Project.SkillSets.Add(skill);

                 var projectId = _projectService.AddProject(Project);
                 if (projectId >= 0)
                 {
                     var AlertMessage = Project.ProjectName + " Having ProjectId: " + projectId + " Created Successfully.";
                     return Json(new { success = true, message = "This is a message" });
                 }

                 return Json(new { success = false, message = "Project Creation Failed!!!" });
                 // return RedirectToAction("GetProjectList");
             }
             catch
             {
                 return View();
             }
         }

但這甚至沒有調用動作方法。

Answer 1

您可以按照以下步驟進行操作-

// read values (example)
var data1 = $('#txt1').val();
var data2 = $('#txt2').val();

// Create your model
var modelData = { 'Name': data1, 'Code': data2 }; // Name and Code are the model properties

$("#Create").click(function () {
    $.ajax({
        url: "/Projects/TempCreateProject",
        datatype: "json",
        type: "POST",
        data: JSON.stringify({ Project: modelData }),
        contentType: "application/json; charset = utf-8"
        success: function (data) {
            alert(data.message);
        },
        error: function () {
            // $("#testarea").html("ERROR");
            alert("Error");
        }
    });
});