This website is no longer actively supported
Written by John DeVight on 13 Jun 2011 18:59
Download ASPX Source Code
Download RAZOR Source Code
* Note: the Telerik.Web.Mvc.dll, Telerik "Contents" and Telerik "Scripts" have all been removed to reduce the zip file size
Overview
In the wiki page Telerik MVC : jQuery.ajax, Partial View and Telerik Controls I showed how Telerik Controls on a partial view could be displayed by a jQuery.ajax call. In most cases you will want to save changes to the data being displayed.
When a postback is made to a method that takes a model as a parameter, the ASP.NET MVC Framework attempts to map the Request.Form variables to the names of the model properties. If there is a match, the value for the Request.Form variable is placed in the model property. For example, if I have a model called WikiPage with a property called Url, the ASP.NET MVC Framework will look at the Request.Form variables for a variable called Url. If it is found, then the WikiPage.Url property will be set to Request.Form["Url"].
The same logic can be applied to other parameters for the postback method. If the method has a parameter called DateCreated and the Request.Form has a variable called DateCreated, then the DateCreated parameter will be set to Request.Form["DateCreated"].
The ajax postback is performed using jQuery.ajax. If the page has a form element, then the form can be serialized and the value for each of the elements in the form will be passed to the postback method as Request.Form variables.
Implementing a Form on the LoadUsingAjax Form
In the wiki page Telerik MVC : jQuery.ajax, Partial View and Telerik Controls I added a Telerik ComboBox and Telerik DatePicker. In addition to these controls, I have added a Html TextBox for the URL. I updated the TitleComboBox to raise the "OnChange" client event so that I can set the DateCreated and Url fields with the appropriate values for the selected WikiPage. Lastly, I added a "Save Wiki Page" button that, when clicked, will execute the Index.SaveWikiPage() javascript function. I then wrapped these three controls in a Form. The Html.BeginForm overloaded method that I chose to use takes 4 parameters. They are:
- Name of the action or postback method
- Name of the controller
- The FormMethod used
- Addtional HTML Attributes - In this case, to set the id of the Form
Here is the code:
@using Telerik.Web.Mvc.UI;
@{
Layout = null;
StringWriter sw = null;
}
<div id="loadUsingAjax" style="overflow: auto;">
@using (Html.BeginForm("SaveWikiPage", "Home", FormMethod.Post, new { id = "SaveWikiPageForm" }))
{
<div>
<div style="width:40px; display:inline-block;">Title:</div>
@{
ComboBox cbo = Html.Telerik().ComboBox()
.Name("TitleComboBox")
.HtmlAttributes(new { style = "width:500px;" })
.AutoFill(true)
.DataBinding(dataBinding => dataBinding.Ajax().Select("GetWikiPageTitles", "Home"))
.ClientEvents(events => events.OnChange("Index.TitleComboBox_OnChange"));
cbo.Render();
sw = new StringWriter();
cbo.WriteInitializationScript(sw);
}
@(Html.Hidden("TitleComboBox_Create_tComboBox", sw.GetStringBuilder().ToString()))
<span style="width:20px;"> </span>
Created Date:
@{
DatePicker dp = Html.Telerik().DatePicker().Name("DateCreated");
dp.Render();
sw = new StringWriter();
dp.WriteInitializationScript(sw);
}
@(Html.Hidden("DateCreated_Create_tDatePicker", sw.GetStringBuilder().ToString()))
<br />
<div style="width:40px; display:inline-block;">Url:</div>
@Html.TextBox("Url", null, new { style = "width:500px;" })
<br />
<button id="AddButton" style="margin: 10px 0 10px 0;" onclick="Index.SaveWikiPage(); return false;">Save Wiki Page</button>
</div>
}
@{
Grid<TelerikMvcApplication.Models.WikiPage> grid =
Html.Telerik().Grid<TelerikMvcApplication.Models.WikiPage>()
.Name("WikiPageGrid")
.Columns(columns =>
{
columns.Bound(c => c.Title);
columns.Bound(c => c.Url);
columns.Bound(c => c.DateCreated);
columns.Bound(c => c.Id).Hidden(true);
columns.Command(commands =>
{
commands.Edit();
}).Width(100);
})
.DataKeys(keys =>
{
keys.Add(c => c.Id);
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("GetWikiPages", "Home")
.Update("UpdateWikiPages", "Home")
)
.Pageable(paging =>
paging.PageSize(5)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Bottom)
)
.Footer(true);
grid.Render();
sw = new StringWriter();
grid.WriteInitializationScript(sw);
}
@Html.Hidden("WikiPageGrid_Create_tGrid", sw.GetStringBuilder().ToString())
</div>
Implementing SaveWikiPage In The Home Controller
The SaveWikiPage method takes a WikiPage model as a parameter. Since I named the Telerik DatePicker control DateCreated, the same name as the WikiPage.DateCreated property, the ASP.NET MVC Framework will map the Request.Form["DateCreated"] variable to the WikiPage.DateCreated property. I also named the TextBox control Url which is the same name as the WikiPage.Url property. Again, the ASP.NET MVC Framework will map the Request.Form["Url"] variable to the WikiPage.Url property.
However, I gave the Telerik ComboBox the name "TitleComboBox". The TitleComboBox contains the Id of the selected WikiPage and displays the Title of the WikiPage. The name TitleComboBox doesn't map to the WikiPage.Id property. So in the SaveWikiPage method, I need to get the Request.Form["TitleComboBox"] variable to get the Id of the selected WikiPage. I also update the title of the WikiPage by getting the text of the TitleComboBox from the Request.Form["TitleComboBox-input"] variable.
It is important to note that if the Title is actually altered in the TitleComboBox, then the Request.Form["TitleComboBox"] variable will equal the value typed into the TitleComboBox instead of the Id of the WikiPage selected. You can test for this scenerio using the Int32.TryParse method to determine if the Request.Form["TitleComboBox"] is an integer.
I also altered the GetWikiPageList method to store the WikiPage list in session since I am not using a persisted store.
Here is the code:
[HttpPost]
public void SaveWikiPage(WikiPage wikiPage)
{
IList<WikiPage> list = GetWikiPageList();
WikiPage persistWikiPage = (from WikiPage wp in list
where wp.Id == Int32.Parse(Request["TitleComboBox"])
select wp).First();
persistWikiPage.Title = Request["TitleComboBox-input"];
persistWikiPage.DateCreated = wikiPage.DateCreated;
persistWikiPage.Url = wikiPage.Url;
Session["WikiPages"] = list;
}
private IList<WikiPage> GetWikiPageList()
{
IList<WikiPage> list = null;
if (Session["WikiPages"] == null)
{
list = new List<WikiPage>();
list.Add(new WikiPage
{
Id = 1,
Title = "Telerik MVC : Creating an \"ExtJS border-layout\" with Splitters",
Url = "http://aspnet.wikidot.com/telerik-mvc:creating-an-extjs-border-layout-with-splitters",
DateCreated = new DateTime(2011, 5, 11)
});
list.Add(new WikiPage
{
Id = 2,
Title = "Telerik MVC : Resizing Controls Within Splitter Panes",
Url = "http://aspnet.wikidot.com/telerik-mvc:resizing-controls-within-splitter-panes",
DateCreated = new DateTime(2011, 5, 12)
});
list.Add(new WikiPage
{
Id = 3,
Title = "Telerik MVC : Dynamically Add a Tab to the TabStrip",
Url = "http://aspnet.wikidot.com/telerik-mvc:dynamically-add-a-tab-to-the-tabstrip",
DateCreated = new DateTime(2011, 5, 12)
});
list.Add(new WikiPage
{
Id = 4,
Title = "Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid",
Url = "http://aspnet.wikidot.com/telerik-mvc:jquery-ajax-partial-view-and-the-telerik-grid",
DateCreated = new DateTime(2011, 5, 14)
});
list.Add(new WikiPage
{
Id = 5,
Title = "Telerik MVC : Creating Standard MessageBox Dialogs",
Url = "http://aspnet.wikidot.com/telerik-mvc:creating-generic-messagebox-dialogs",
DateCreated = new DateTime(2011, 5, 11)
});
list.Add(new WikiPage
{
Id = 6,
Title = "Telerik MVC : Extending the Telerik Extensions for ASP.NET MVC",
Url = "http://aspnet.wikidot.com/telerik-mvc:extending-the-telerik-extensions-for-asp-net-mvc",
DateCreated = new DateTime(2011, 5, 11)
});
}
else
{
list = Session["WikiPages"] as IList<WikiPage>;
}
return list;
}
Implementing the TitleComboBox.OnChange Event
When the TitleComboBox.OnChange event is raised, the Index.TitleComboBox_OnChange event handler gets the appropriate WikiPage from the grid and displays the DateCreated and Url for the selected WikiPage. Here is the code:
Index.TitleComboBox_OnChange = function(e) {
$.each($('#WikiPageGrid').data('tGrid').data, function(idx, wikiPage) {
if (wikiPage.Id == parseInt(e.value)) {
// Set the URL for the selected WikiPage.
$('#Url').val(wikiPage.Url);
// Set the DateCreated for the selected WikiPage.
$('#DateCreated').data('tDatePicker').value(wikiPage.DateCreated);
return false;
}
});
}
Implementing jQuery.ajax to Save the Wiki Page and Reload the Telerik Grid
The Index.SaveWikiPage javascript function posts the serialized Form. In the jQuery.ajax.success function, I rebind the grid so that the grid displays the new Date Created and Url properties for the WikiPage that was updated.
Here is the code:
Index.SaveWikiPage = function() {
$.ajax({
type: "POST",
url: '/Home/SaveWikiPage/',
data: $('#AddWikiPageForm').serialize()
})
.success(function(result) {
$('#WikiPageGrid').data('tGrid').rebind();
})
.error(function(result) {
alert('error: ' + result);
});
}
