Awesome ASP.net Core and MVC Controls

Form helper

Post form via ajax and pass result to Success js function

The Html.Awe.Form helper will make forms of a certain class defined by .FormClass(string) to be posted via ajax, form submission can also be prevented with a confirm dialog by setting .Confirm(bool). A js function can be set to handle the result from the server using .Success(string). Ajax post can be disabled by using .UseAjax(false); The class formLoad is added to show a loading animation when the post takes a long time, the code that does this is in utils.js (init method).
FormDemo/Index.cshtml

@using (Html.BeginForm("AskName", "FormDemo", FormMethod.Post, new { @class = "ajaxForm formLoad" }))
{
@Html.Partial("AskName", new AskNameInput())
}
<div id="result" style="color: green; min-height: 30px;"></div>

@(Html.Awe().Form()
.FormClass("ajaxForm")
.Confirm(true)
.ConfirmOptions(o => { o.YesText = "Yes, do it !"; o.Message = "really post the form ?"; })// change default options
.Success("showResult")// js func to be called after successful post
.FillFormOnContent(true))

<script type="text/javascript">
function showResult(o) {
$('#result').html('server says your name is ' + o.Name);
}
</script>
Demos/Helpers/FormDemoController.cs
[HttpPost]
public ActionResult AskName(AskNameInput input)
{
if (input.Delay)
{
Task.Delay(2000).Wait();
}

if (!ModelState.IsValid) return View(input);

return Json(new { Name = input.FName + " " + input.LName });
}

Form used to post form via ajax and replace the content of the form with the result

Say something:
FormDemo/Index.cshtml
@using (Html.BeginForm("FillForm", "FormDemo", FormMethod.Post, new { @class = "c2" }))
{
@Html.Partial("FillForm")
}

@(Html.Awe().Form()
.FormClass("c2")
.FillFormOnContent(true) /* when true and the result is Content/View, the result will be used to fill the form's content*/
.BeforeSubmit("validate")
)

<script type="text/javascript">
function validate() {
if (!$('#SaySomething').val()) {
alert('please write something in the textbox');
return false;
}
return true;
}
</script>

Used to confirm a form post, and post the form without ajax

FormDemo/Index.cshtml
@using (Html.BeginForm("Index", "FormDemo", FormMethod.Post, new { @class = "normalPost" }))
{
@Html.AntiForgeryToken()
<input type="text" name="word" value="click the button" />
<input type="submit" value="Submit" class="awe-btn mbtn" />
}
@(Html.Awe().Form()
.UseAjax(false)
.Confirm(true)
.FormClass("normalPost")
.Tag(new { target = "confirmCont" }))
<div id="confirmCont"></div>
@*used for the inline popup*@



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.