http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application
Sr. Software Engineer
Showing posts with label MVC. Show all posts
Showing posts with label MVC. Show all posts
Friday, November 14, 2014
Tuesday, November 4, 2014
Custom Helpers in Asp.net MVC4
http://www.codeproject.com/Tips/832640/Custom-Helpers-in-Asp-net-MVC
Sunday, September 14, 2014
AJAX in MVC using jQuery and JSON Object
AJAX in MVC using jQuery and JSON Object
In previous post I have expalined about the difference between Webforms and MVC. In this post I am gonna help you on how to implement AJAX in MVC using jQuery.
Before starting with AJAX in MVC, lets have quick glance at what Ajax is all about.
What is AJAX?
- AJAX is an acronym for 'Asynchronous JavaScript and XML'. It is a technique for creating fast and dynamic web pages.
- AJAX allows to update specific parts of web pages asynchronously by exchanging small amounts of data with the server behind the scenes (request from UI get the modified data back from server). It is possible to update parts of a web page, without reloading the whole page.
- Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
- Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
Earlier, XML is used to exchange the data with Server, ie using XMLHttpRequest object. But these days JSON(JavaScript Object Notation) is used to send and receive the data from UI to server.
What is JSON?
JSON is short for JavaScript Object Notation, It is a lightweight data-interchange format that is easy for humans to read and write, and for machines to parse and generate. JSON is based on the object notation of the JavaScript language. However, it does not require JavaScript to read or write because it is a text format that is language independent. Its more like key-value pair.
Here is the example for JSON which is equivalent of XML.
Ajax in MVC:
Ajax in MVC can be used in two ways, one is using unobtrusive java script and other one is using jQuery Ajax. Lets concentrate on jQuery Ajax.
To perform Ajax using jQuery we use $.ajax() method. There are different shorter forms $.ajax() of to perform specific operations.
- To Load data - $.load()
- To Get data - $.get()
- To Post data - $.post()
Ajax syntax is explained below.
$.ajax({
url: url,
type: 'POST',
data: Data,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (result) {
},
error: function failCallBk(XMLHttpRequest, textStatus, errorThrown) {
alert("Some error occured while processing your request.");
}
});
**url: Type: String
It is pointing to Action method in your controller. It will be having value like "Area/Controller/Action"
**type: Type: String
Ajax type is defined using type GET to get the data, POST is to post data.
** data: Type: PlainObject or String or Array
This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
**dataType: (
xml, json, script, or html
) Represents what kind of data you are you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).**contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
Type: String
When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding.
These are the basic parameters, there are many other parameters also you can use to optmiize the request based on your requirement.
For an example, lets assume a typical situation where you want to submit your form data. Consider you want to submit your first name and last name.
Here are the steps to submit data using AJAX and JSON Object.
View Code:
<table>
<tr>
<td>
First name
<br />
@Html.TextBox("FirstName", "", new { id = "firstName" })
</td>
<td>
Last Name
<br />
@Html.TextBox("LastName", "", new { id = "lastName" })
</td>
<td>
<button type="submit" id="submitData">Submit Data</button>
</td>
</tr>
</table>
Model Code:
public class UserDataViewModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
Controller Code where Ajax will be pointing:
[HttpPost]
public JsonResult SubmitUserData(UserDataViewModel userData)
{
/* To use the UserDataViewModel dierctly here make sure that
you create JSON data in AJAX in the same way.
Property names should be same in both model aswell as in the JSON object
*/
// Perform your actions here.
return Json("data submitted");
}
jQuery Code:
//Get First and Last Name.
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
// create JSON Object
var ajxUserData = {
"FirstName":firstName,
"LastName":lastName
}
// Then stringify data
var data = JSON.stringify({ userData: ajxUserData });
//Then Create URL
var url = "User/UserData/SubmitUserData" // User is a AreaName, UserData is a Controller and SubmitUserData is ActionMethod
$.ajax({
url: url,
type: 'POST',
data: data,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (result) {
// In result you will get result that you return, for this example you get "data submitted"
},
error: function failCallBk(XMLHttpRequest, textStatus, errorThrown) {
alert("Some error occured while processing your request.");
}
});
});
Hope this helps.! Happy Coding.
Please do like and share it, if you find it useful.
Please do like and share it, if you find it useful.
http://www.spinyourworldbyjaw.blogspot.in/2014/09/ajax-in-mvc-using-jquery-and-json-object.html
Thursday, August 14, 2014
Handling multiple submit buttons on the same form - MVC
http://www.dotnet-tricks.com/Tutorial/mvc/cM1X161112-Handling-multiple-submit-buttons-on-the-same-form---MVC-Razor.html
Wednesday, August 6, 2014
ASP.Net MVC Authentication
http://www.codeproject.com/Articles/578374/AplusBeginner-splusTutorialplusonplusCustomplusF
http://www.itorian.com/2013/11/customize-users-profile-in-aspnet.html
Sunday, May 18, 2014
Wednesday, May 14, 2014
MVC Different Redirection Techniques (Razor)
MVC4 Different Redirection Techniques (Razor)
This tip lists different redirection techniques for MVC4.- HTML Tag
<input type="button" value="Forgot Password" onclick="window.location.href('@Url.Action("ForgotPassword","Account")')" />
- For posting, you could use a
form
:<form method="post" id="signin" action="@Url.Action("ForgotPassword", "Account")"> <input type="button" value="Forgot Password" /> </form>
- Using script:
<script type="text/javascript"> $(document).ready(function () { $('#btnForgotPassword').click(function (e) { location.href = '@Url.Content("~/Account/ForgotPassword/")'; }); }); </script> //change below input tag <input id='btnForgotPassword' type="button" value="Forgot Password" />
- If it is a link:
@Html.ActionLink("some text", "actionName", "controllerName")
- For posting, use a form:
@ using(Html.BeginForm("actionName", "controllerName")) { <input type="submit" value="Some text" /> }
- For Anchor Tag:
<a href="http://www.codeproject.com/Controller/View" class="Button">Text</a>
- Using
RenderAction
:@{ Html.RenderAction("ActionName", "ControllerName", new { FranchiseSetId = Model.FranchiseSetID }); }
http://www.codeproject.com/Articles/429164/Html-BeginForm-vs-Ajax-BeginForm-in-MVC
Different ways for returning/rendering a view in MVC Razor
http://www.dotnet-tricks.com/Tutorial/mvc/4XDc110313-return-View()-vs-return-RedirectToAction()-vs-return-Redirect()-vs-return-RedirectToRoute().html
http://www.dotnet-tricks.com/Tutorial/csharp/c4SE281212-Difference-between-Response.Redirect-and-Server.Transfer.html
Tuesday, May 13, 2014
ASP.Net MVC HTML Helper
<table>
<tr>
<td>
<span>Account Type Name</span>
</td>
<td>
@Html.DropDownListFor(model => model.AccountTypeId, new SelectList( ViewBag.AccountTypes, "value", "text"))
</td>
</tr>
</table>
public ActionResult AddEditView(string accountSubTypeID)
{
AccountSubTypeModel accountSubTypeModel = new AccountSubTypeModel();
if (!string.IsNullOrEmpty(accountSubTypeID))
{
accountSubTypeModel = _subTypeService.SingleOrDefault(new Guid(accountSubTypeID));
}
this.LoadDDL(accountSubTypeModel);
return PartialView(accountSubTypeModel);
}
private void LoadDDL(AccountSubTypeModel accountSubTypeModel)
{
var accountTypes = _typeService.GetDropDownData("Id", "TypeName");
var selectList = new SelectList(accountTypes, "Value", "Text", accountSubTypeModel.AccountTypeId);
ViewBag.AccountTypes = selectList;
}
<tr>
<td>
<span>Account Type Name</span>
</td>
<td>
@Html.DropDownListFor(model => model.AccountTypeId, new SelectList( ViewBag.AccountTypes, "value", "text"))
</td>
</tr>
</table>
public ActionResult AddEditView(string accountSubTypeID)
{
AccountSubTypeModel accountSubTypeModel = new AccountSubTypeModel();
if (!string.IsNullOrEmpty(accountSubTypeID))
{
accountSubTypeModel = _subTypeService.SingleOrDefault(new Guid(accountSubTypeID));
}
this.LoadDDL(accountSubTypeModel);
return PartialView(accountSubTypeModel);
}
private void LoadDDL(AccountSubTypeModel accountSubTypeModel)
{
var accountTypes = _typeService.GetDropDownData("Id", "TypeName");
var selectList = new SelectList(accountTypes, "Value", "Text", accountSubTypeModel.AccountTypeId);
ViewBag.AccountTypes = selectList;
}
Thursday, May 8, 2014
Data Path TPAWeb MVC
http://mvcpaging.apphb.com/AreaOne/Home
Tools>Extensions and Updates>
Tools>Extensions and Updates>
PM> Install-Package MVC4.Paging
bootstrap-modal
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php
http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php
http://jschr.github.io/bootstrap-modal/
http://www.codeproject.com/Tips/597253/Using-the-Grid-MVC-in-ASP-NET-MVC
https://gridmvc.codeplex.com/SourceControl/latest#GridMvc/GridMvc/Pagination/GridPager.cs
http://getbootstrap.com/javascript/
Ctrl + Alt + i = Immediate Window to view cshtml value
*******************************************************************************
if database Change occured:
1.Database.tt
2.Generate.tt
3.show all files
4.Include all hidden Files
5.Rebuild
6.Commit
DELETE FROM FOLLOWING FILES:
D:\User\Rubol\Projects\TPAManagerMVC\July.TPAManager\July.TPAManager\TPAWeb.2013\July.Project\IOC\Core\ProjectServiceModule.cs
D:\User\Rubol\Projects\TPAManagerMVC\July.TPAManager\July.TPAManager\TPAWeb.2013\July.Project\IOC\Core\ProjectRepositoryModule.cs
Domain => Model
Repository
*****************************************************************************
\July.TPAManager\TPAWeb.2013\July.Common\Partial\PartialDomainModel\PersonModel.partial.cs
\July.TPAManager\TPAWeb.2013\July.Common\Partial\PartialViewModel\PhoneViewModel.partial.cs
\July.TPAManager\TPAWeb.2013\July.Common\Models\Partial\Person.partial.cs
Ajax.BeginForm
http://www.blackbeltcoder.com/Articles/script/using-ajax-beginform-with-asp-net-mvc
https://gridmvc.codeplex.com/SourceControl/latest#GridMvc/GridMvc/Pagination/GridPager.cs
http://getbootstrap.com/javascript/
Ctrl + Alt + i = Immediate Window to view cshtml value
*******************************************************************************
if database Change occured:
1.Database.tt
2.Generate.tt
3.show all files
4.Include all hidden Files
5.Rebuild
6.Commit
DELETE FROM FOLLOWING FILES:
D:\User\Rubol\Projects\TPAManagerMVC\July.TPAManager\July.TPAManager\TPAWeb.2013\July.Project\IOC\Core\ProjectServiceModule.cs
D:\User\Rubol\Projects\TPAManagerMVC\July.TPAManager\July.TPAManager\TPAWeb.2013\July.Project\IOC\Core\ProjectRepositoryModule.cs
Domain => Model
Repository
*****************************************************************************
\July.TPAManager\TPAWeb.2013\July.Common\Partial\PartialDomainModel\PersonModel.partial.cs
\July.TPAManager\TPAWeb.2013\July.Common\Partial\PartialViewModel\PhoneViewModel.partial.cs
\July.TPAManager\TPAWeb.2013\July.Common\Models\Partial\Person.partial.cs
Ajax.BeginForm
http://www.blackbeltcoder.com/Articles/script/using-ajax-beginform-with-asp-net-mvc
Monday, May 5, 2014
Entity Framework in an ASP.NET MVC
http://www.asp.net/mvc/tutorials/getting-started-with-ef-5-using-mvc-4/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application
http://blog.longle.net/2013/05/11/genericizing-the-unit-of-work-pattern-repository-pattern-with-entity-framework-in-mvc/
http://csharppulse.blogspot.com/2013/09/learning-mvc-part-6-generic-repository.html
http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application
http://blog.longle.net/2013/05/11/genericizing-the-unit-of-work-pattern-repository-pattern-with-entity-framework-in-mvc/
http://csharppulse.blogspot.com/2013/09/learning-mvc-part-6-generic-repository.html
Repository Pattern in MVC5
http://code.msdn.microsoft.com/Repository-Pattern-in-MVC5-0bf41cd0http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application
Subscribe to:
Posts (Atom)