局部視圖中的聯繫表格

Question

我不得不承認，從Web窗體到MVC的過渡實際上正在讓我迷失。我似乎無法將MVC的功能與Web窗體的功能相提並論，並且在嘗試執行看起來很簡單的任務時，我會繼續在障礙後碰到障礙。將這個與javascript/jquery的基本知識結合起來，而且我大多數時間都在撓撓我的腦海。

我一直在努力將我公司從Web Forms構建的自定義CMS過渡到MVC。該CMS允許創建頁面和操作網站導航，從而創建頁面模型以及相關的視圖和控制器。

雖然客戶端可以編輯99％的網站，但某些元素是靜態的，並在特定頁面上按需加載。例如，聯繫人頁面存在於CMS內，但該站點按需要注入實際聯繫表單。

在Web窗體中構建時，此聯繫人窗體只是一個用戶控件，具有用於處理回發的自己的邏輯。我認爲這裏的邏輯轉換應該是創建一個局部視圖，但是我完成這項任務遇到了很多困難。雖然我已經能夠創建此聯繫表單的模型，視圖和控制器，但我似乎無法使其正常工作。

經過3天的堆棧溢出求教之後，我完成了幾乎所有的工作。但是，我無法弄清楚如何從部分視圖執行看似簡單的重定向來挽救我的生命。我嘗試了很多方法，包括Doug.Instance中描述的方法，但沒有任何運氣。在發佈後，即使控制器使用「返回PartialView」，部分視圖也將作爲整個視圖返回。如果我再次發佈它，它將以原始顯示的形式返回，作爲局部視圖。此外，我的Redirect變量未成功更新，並且OnSuccess javascript未觸發。

以下是我的代碼。請幫助我，因爲我跑出來的頭髮...

頁視圖（縮短爲簡潔起見）

... 
@if (Model.ID == 8) 
{ 
    //LOAD CONTACT FORM 
    @Html.Action("Contact","ContactForm") 
}... 

聯繫表的局部視圖（縮短爲簡潔起見）

@model NCOWW.Models.ContactForm 

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    // Labels over the inputs. 
    window.addEvent("load", function() { 
    var myForm = document.id('contactForm'); 
    myForm.getElements('[type=text], textarea').each(function (el) { 
     new OverText(el); 
    }); 
    }); 
    function FormComplete() { 
    if ($("#Redirect").val() != '') { 
     document.location = $("#Redirect").val(); 
    } 
    } 
</script> 
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "contactForm", OnSuccess = "FormComplete" })) 
{ 
    @Html.ValidationSummary(true) 
    <div id="contactForm"> 
    @Html.HiddenFor(model => model.Redirect) 

    @Html.TextBoxFor(model => model.Name, new { tabindex = 1, @class = "half", Title = @Html.DisplayNameFor(model => model.Name) }) 
    @Html.ValidationMessageFor(model => model.Name) 

     @Html.TextAreaFor(model => model.Comments, new { tabindex = 13, Title =  @Html.DisplayNameFor(model => model.Comments) }) 
    @Html.ValidationMessageFor(model => model.Comments) 

    <br /> 
    <input type="submit" value="Submit" name="Submit" class="button" /> 
    </div> 
} 

聯繫表格控制器（縮短了BREVITY）

public ActionResult Contact(ContactForm c) 
    { 
     try 
     { 
     MailMessage message = new MailMessage(); 
     message.IsBodyHtml = true; 
     message.From = new MailAddress(c.Email); 
     message.Body += "<b>Name:</b> " + c.FullName + "<br/><br/>"; 
     message.Body += "<b>Questions/Comments:</b><br> " + c.Comments; 

     SmtpClient client = new SmtpClient(); 
     client.Send(message); 
     c.Redirect = "/formsuccess"; 

     return PartialView("contactForm", c); 
     } 
     catch 
     { 
     return PartialView(); 
     } 
    } 

Answer 1

我能得到這個工作，一旦我站對我實際想要達成的目標進行反思。我沒有返回PartialView("contactForm", c);，而是返回Json(c);。然後我解析了返回的Json並從那裏重定向。最終的工作代碼如下。

PAGE VIEW（縮短爲了簡潔）

... 
@if (Model.ID == 8) 
{ 
    //LOAD CONTACT FORM 
    @Html.Action("Contact","ContactForm") 
}... 

CONTACT FORM局部視圖（簡略爲簡潔起見）

@model NCOWW.Models.ContactForm 

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    // Labels over the inputs. 
    window.addEvent("load", function() { 
    var myForm = document.id('contactForm'); 
    myForm.getElements('[type=text], textarea').each(function (el) { 
     new OverText(el); 
    }); 
    }); 
    function FormComplete(result) { 
    if (result.Redirect != null && result.Redirect != '') { 
     document.location = result.Redirect; 
    } 
    } 
</script> 
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "contactForm", OnSuccess = "FormComplete" })) 
{ 
    @Html.ValidationSummary(true) 
    <div id="contactForm"> 
    @Html.HiddenFor(model => model.Redirect) 

    @Html.TextBoxFor(model => model.Name, new { tabindex = 1, @class = "half", Title = @Html.DisplayNameFor(model => model.Name) }) 
    @Html.ValidationMessageFor(model => model.Name) 

     @Html.TextAreaFor(model => model.Comments, new { tabindex = 13, Title =  @Html.DisplayNameFor(model => model.Comments) }) 
    @Html.ValidationMessageFor(model => model.Comments) 

    <br /> 
    <input type="submit" value="Submit" name="Submit" class="button" /> 
    </div> 
} 

CONTACT FORM控制器（縮短爲了簡潔）

public ActionResult Contact(ContactForm c) 
{ 
    try 
    { 
    MailMessage message = new MailMessage(); 
    message.IsBodyHtml = true; 
    message.From = new MailAddress(c.Email); 
    message.Body += "<b>Name:</b> " + c.FullName + "<br/><br/>"; 
    message.Body += "<b>Questions/Comments:</b><br> " + c.Comments; 

    SmtpClient client = new SmtpClient(); 
    client.Send(message); 
    c.Redirect = "/formsuccess"; 

    return Json(c); 
    } 
    catch 
    { 
    //ERROR CATCH CODE 
    } 
} 

Answer 2

您遇到的問題與ajax常見。 你需要注意的是，當Ajax呈現響應它不知道你已經返回的JavaScript。

你需要有一些註冊你的JavaScript的方式才能觸發它。

現在該怎麼做？ 我創建了一種方法，適用於我：

在頁面上有重新加載的javascript函數。

​​

你的Ajax調用，我有阿賈克斯行動鏈接，但開始的形式幾乎是相同的

你感興趣的部分是AjaxOptions。 和事件OnSuccess。這將在通話成功時觸發。

例用於鏈路：

@ Ajax.ActionLink（ 「註釋」， 「AddComment」， 「任務」，新的{ID = Model.Task.TaskId，TaskStatus =（int）的State.Closed }， 新AjaxOptions {列舉HTTPMethod = 「獲取」，UpdateTargetId = 「showResults」 的onSuccess = 「RedirectToLocation」}，NULL）

And here you can read about ajax options more

只是指出問題在你的代碼示例爲您的操作結果

try 
     { 
     MailMessage message = new MailMessage(); 
     message.IsBodyHtml = true; 
     message.From = new MailAddress(c.Email); 
     message.Body += "<b>Name:</b> " + c.FullName + "<br/><br/>"; 
     message.Body += "<b>Questions/Comments:</b><br> " + c.Comments; 

     SmtpClient client = new SmtpClient(); 
     client.Send(message); 
     c.Redirect = "/formsuccess"; 

     return PartialView("contactForm", c); 
     } 
     catch 
     { 
     return PartialView(); <-- will render what, better will be if it renderes error mesasge partial view 
     } 

Answer 3

嘗試通過在局部視圖中添加動作名稱

@using（Ajax.BeginForm（「操作名稱」，新AjaxOptions {UpdateTargetId = 「聯繫形式」 的onSuccess = 「FormComplete」}））{