76
rated 0 times
[
83]
[
7]
/ answers: 1 / hits: 102699
/ 10 Years ago, sat, october 4, 2014, 12:00:00
I'm trying to learn asp.net and so far I can load other page contents without refreshing using Ajax.Actionlink and AjaxOptions() but I can't figure it out how to use ajax when submitting a form. I did a lot of googling but couldn't find the appropriate solution. Here are my codes,
Controller page
namespace CrudMvc.Controllers
{
public class HomeController : Controller
{
sampleDBEntities db = new sampleDBEntities();
//
// GET: /Home/
public ActionResult Index()
{
return View(db.myTables.ToList());
}
public PartialViewResult Details(int id = 0)
{
myTable Table = db.myTables.Find(id);
return PartialView(Table);
}
[HttpGet]
public PartialViewResult Create()
{
return PartialView();
}
[HttpPost]
public ActionResult Create(myTable table)
{
if (ModelState.IsValid)
{
db.myTables.Add(table);
db.SaveChanges();
return RedirectToAction(Index);
}
return View(table);
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
Index View page
@model IEnumerable<CrudMvc.Models.myTable>
@{
ViewBag.Title = Index;
Layout = ~/Views/Shared/_Layout.cshtml;
}
<script src=~/Scripts/jquery-1.7.1.min.js></script>
<script src=~/Scripts/jquery.unobtrusive-ajax.min.js></script>
<h2>Index</h2>
<p>
@Ajax.ActionLink(Add New, Create, new AjaxOptions()
{
HttpMethod = GET,
UpdateTargetId = info,
InsertionMode = InsertionMode.Replace
})
</p>
<div id=main>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.name)
</th>
<th>Action</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Ajax.ActionLink(Details, Details, new{ id=item.id}, new AjaxOptions()
{
HttpMethod = GET,
UpdateTargetId = info,
InsertionMode = InsertionMode.Replace
})
</td>
</tr>
}
</table>
</div>
<div id=info></div>
Create View Page
@model CrudMvc.Models.myTable
@{
ViewBag.Title = Create;
Layout = ~/Views/Shared/_Layout.cshtml;
}
<h2>Create</h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>myTable</legend>
<div class=editor-label>
@Html.LabelFor(model => model.id)
</div>
<div class=editor-field>
@Html.EditorFor(model => model.id)
@Html.ValidationMessageFor(model => model.id)
</div>
<div class=editor-label>
@Html.LabelFor(model => model.name)
</div>
<div class=editor-field>
@Html.EditorFor(model => model.name)
@Html.ValidationMessageFor(model => model.name)
</div>
<p>
<input type=submit value=Create />
</p>
</fieldset>
}
<script>
var form = $('#main');
$.ajax({
cache: false,
async: true,
type: POST,
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
alert(data);
}
});
</script>
<div>
@Html.ActionLink(Back to List, Index)
</div>
@section Scripts {
@Scripts.Render(~/bundles/jqueryval)
}
More From » jquery
