從JS對話框中單擊發布到控制器的操作方法

Question

我在我的視圖中有一個JS對話框。當視圖返回時，對話框被最大化/打開。該視圖還有一個鏈接，當用戶點擊鏈接時，該對話框打開。

我在名爲Submit的對話框中有一個按鈕。我試圖做的是，當模式框打開時，頁面元素的其餘部分應該模糊或不分明。當他們點擊對話框中的提交按鈕時，它應該使用模型屬性發布到控制器操作方法。我不是很擅長JS語法，但是如何在提交點擊的情況下發回給名爲「Create」的控制器操作，提交值爲「Confirmation」？

@model RunLog.Domain.Entities.RunLogEntry 
@{ 
    ViewBag.Title = "Create"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" })) 
    { 
     @Html.ValidationSummary(true) 
     <div class="exception">@(ViewBag.ErrorMessage)</div> 

     //xyz elements here 

      <div class="bodyContent"> 
     <span class="leftContent"> 
      @Html.Label("Run Dates") 
     </span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink"> 
      Click here to Select Run Dates</span> 
      <br /> 
      <span id="RunDatesDisplayy"></span></span> 
    </div> 

    <div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal; 
     overflow: scroll; width: 800px; height: 450px; display: none;"> 
     <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;"> 
      <thead> 
       <tr> 
        <th> 
         Run Dates: 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
        @Html.EditorFor(x => x.RunDatesDisplay) 
      </tbody> 
     </table> 
    </div> 
} 

JS文件對話框（runDates.js）：

var RunDialog; 
$(document).ready(function() { 

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400, 
     buttons: { "Submit": function() { 
      $(this).dialog("close"); 
     }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $('#RunDatesChildDialogLink').click(function() { 
     RunDialog.dialog('open'); 
     $("#runDatestreeview").parent().appendTo("form"); 
    }); 

    $("#runDatestreeview").parent().appendTo("form"); 
}); 

控制器動作：

[HttpPost] 
     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM, 
            string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates) 
     { 




**EDIT:** 


var RunDialog; 

$(document).ready(function() { 

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400, 
     buttons: { "Continue": function() { 
      var str = $("#form").serialize(); 

      $.ajax({ 
       url: "/RunLogEntry/Create", 
       data: str, 
       cache: false, 
       type: 'POST', 
       dataType: 'json', 
       contentType: "application/json;charset=utf-8", 
       success: function (data, status) { 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { alert('error') } 
      }); 

     }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $('#RunDatesChildDialogLink').click(function() { 
     RunDialog.dialog('open'); 
     $("#runDatestreeview").parent().appendTo("form"); 
    }); 

    $("#runDatestreeview").parent().appendTo("form"); 
}); 

Answer 1

示例來說明如何您可以發佈數據到控制器方法

剃刀代碼：

<div id="form"> 
     <table width="600"> 
      <tr> 
       <td>Select Date:</td> 
       <td> 
        <input class="txtDate" type="date" size="20"></td> 
      </tr> 
      <tr> 
       <td>Select Expense Type:</td> 
       <td> 
        <select class="ExpenseType"> 
         <optgroup label="Room"> 
          <option>Room Fare</option> 
         </optgroup> 

         <optgroup label="Mess"> 
          <option>Monthly Mess</option> 
         </optgroup> 

         <optgroup label="Others"> 
          <option>Bus Fare</option> 
          <option>Tapari</option> 
          <option>Mobile Recharge</option> 
          <option>Auto</option> 
         </optgroup> 
        </select></td> 
      </tr> 
      <tr> 
       <td>Enter Cost:</td> 
       <td> 
        <input class="cost" type="text" size="45" /></td> 
      </tr> 
      <tr> 
       <td>Extra Details:</td> 
       <td> 
        <input class="extra" type="text" size="45" /></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td> 
        <button href="javascript:void(0);" onClick="saveExpense();" >Submit</button></td> 
      </tr> 
     </table> 
    </div> 

jQuery代碼：

<script> 
function saveExpense() 
    { 
     var expenseobject = { 
      date:$('.txtDate').val() , 
      type:$('.ExpenseType').val() , 
      cost: $('.cost').val(), 
      extra:$('.extra').val() 

     }; 

     $.ajax({ 
      url: './saveexpense', 
      type: 'POST', 
      contentType: 'application/json', 
      data: JSON.stringify({ obj: expenseobject }), 
      success: function (result) { 
       handleData(result); 

      } 
     }); 

    } 
</script> 

控制器：

public ActionResult SaveExpense(Expense obj) 
     { 
      obj.ExpenseId = Guid.NewGuid(); 
      if (ModelState.IsValid) 
      { 
       context.expenses.Add(obj); 
       context.SaveChanges(); 
       int total=context.expenses.Sum(x => x.cost); 
       return Json(new {spent=total,status="Saved" }); 

      } 
      else 
       return Json(new { status="Error"}); 
     } 

希望這將讓你通過現在...

Answer 2

我只是做了一個簡單的發佈並使用form.serialize而不是手動設置每個模型屬性。簡短

$.post("/RunLogEntry/Create", $("#form").serialize(), function (json) { 
      // handle response 
     }, "json");