PDA

View Full Version : .NET MVC 2 Issue



Riaz
1 Feb 2011, 8:25 PM
Is anybody working on .NET MVC 2 and Sencha Touch?

How do I set Json format in MVC which will be used to display on the Sencha Touch Ext.List?

It will be appreciated for your ideas.

rtoepfer
2 Feb 2011, 1:34 AM
I'm currently working on an ASP.NET MVC2 project on Windows Azure which uses Extjs as the front end. I'm using ODBC for the SQL data interaction. The MVC2 Controller class has functions for implementing JSON, but the control over the result format wasn't granular enough for Extjs. For example, the MVC2 class did not create a Javascript object as the base but instead a Javascript array -i.e [{foo:'bar'}] instead of {foo:'bar'}. I ended up implmenting my own custom handlers in the MODEL aspect.

Basically ASP.NET MVC2 is really Controller/Model as the View has little functionality (i.e. no automated methods of transforming model data to various response data formats).

Salva
2 Feb 2011, 3:32 AM
At the end of your action return a Json using anonymous objects. Ex:



public ActionResult myAction(String id) {
(...)
var list = whateverLinqQuery.ToList();
return Json( new { data = list });
}


Depending on what you want to return you can even create anonymous objects in the .Select() of the Linq Query. This previous code, for example, just returned a list of objects inside a data property of the Json response.

Riaz
2 Feb 2011, 2:59 PM
Thanks 'rtoepfer, and 'salva' for sharing yours ideas.

Hi Salva
Could you explain how I can transfer this json from controller to view and / or Ext.List of Sencha Touch? I am in confusion.

Riaz
2 Feb 2011, 5:16 PM
I have one article regarding on MVC 2 and MVC 3. It may be helpful for somebody.

http://senchatouchtutorial.com/tag-mvc3-json-tutorial

Riaz
6 Feb 2011, 6:28 PM
I am trying to connect between .Net MVC 3 and Sencha tourch. Could anybody help me what I am doing wrong?

STEP ONE: I have created home controller:



using Contact.Models;
using Contact.PresentationModel;

namespace Contact.Controllers
{
public class HomeController : Controller
{
ContactDBEntities db = new ContactDBEntities();

public ActionResult Index()
{

var items = (from d in db.Contacts select new ContactPM() { ID = d.Id, Name = d.Name }).ToList();

if (items == null)
return HttpNotFound();

return Json(items,JsonRequestBehavior.AllowGet);

}

public ActionResult Contact()
{

return View();
}
}


It is converting into Json correctly.

STEP TWO: I have created Contact.js external file. when I type url ="/home/contact", I want to see list of contact.

Contact.js file



:
:
Ext.regModel('Contact', {
fields: ['Id', 'Name']
});
:
:

new Ext.List({
title: 'Contact',
iconCls: 'bookmarks',


//List Structure
itemTpl: '{Id} {Name}',
tpl: '<tpl for="."><div class="contact"><strong>{Name}</strong> {Id}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Contact',
sorters: 'Name',
proxy: {
type: 'scripttag',
url: 'Index.cshtml',
reader: {
type: 'json' ,
root: 'Contacts'
}
},
autoLoad:true,


getGroupString: function (record) {
return record.get('Name');
}

})
})]
}); //End panel



Getting an error:

"Failed to load resource: the server responded with a status of 404 (Not Found)"


Waiting for replay

Riaz
6 Feb 2011, 9:21 PM
At the end of your action return a Json using anonymous objects. Ex:



public ActionResult myAction(String id) {
(...)
var list = whateverLinqQuery.ToList();
return Json( new { data = list });
}


Depending on what you want to return you can even create anonymous objects in the .Select() of the Linq Query. This previous code, for example, just returned a list of objects inside a data property of the Json response.

Could you look what I am doing wrong?

Salva
7 Feb 2011, 2:27 AM
By default, Sencha expects the array of data to be inside a "data" property in the returned Json. If you look at the last line of your code and compare it with mine, you'll see that I'm creating an anonymous object with a data property, and assigning the array of data to it. To put it simply, the last line of your action should be:


return Json(new {data = items}, JsonRequestBehavior.AllowGet);


Looking at your JS, you also have incorrectly defined the store (have you used MVC previously? You don't call actions by using the cshtml file (which is irrelevant btw if you are returning a Json object). This should work:



store: new Ext.data.Store({
model: 'Contact',
proxy: {
type: 'ajax',
url: '/home/index',
reader: {
type: 'json',
root: 'data'
},
actionMethods: {
read: 'POST'
}
}
autoLoad:true,
getGroupString: function (record) {
return record.get('Name');
}
})

Note: in the store example I'm specifying to use post (so you don't need to add the JsonRequestBehavior.AllowGet as a second parameter in the Json() method).

Riaz
7 Feb 2011, 2:41 PM
Thanks you very much. It is working now. Great help.

Riaz
7 Feb 2011, 3:13 PM
By default, Sencha expects the array of data to be inside a "data" property in the returned Json. If you look at the last line of your code and compare it with mine, you'll see that I'm creating an anonymous object with a data property, and assigning the array of data to it. To put it simply, the last line of your action should be:


return Json(new {data = items}, JsonRequestBehavior.AllowGet);


Looking at your JS, you also have incorrectly defined the store (have you used MVC previously? You don't call actions by using the cshtml file (which is irrelevant btw if you are returning a Json object). This should work:



store: new Ext.data.Store({
model: 'Contact',
proxy: {
type: 'ajax',
url: '/home/index',
reader: {
type: 'json',
root: 'data'
},
actionMethods: {
read: 'POST'
}
}
autoLoad:true,
getGroupString: function (record) {
return record.get('Name');
}
})

Note: in the store example I'm specifying to use post (so you don't need to add the JsonRequestBehavior.AllowGet as a second parameter in the Json() method).



I have another basic query on it.
On my above example - what I am getting -
1. When I am running, I am getting JSON format in the index page first.
2. then, when I am typing "/HOME/Contact", I am getting sencha Touch framework. And it is retrieving JSON data.

Now, I want to get same within a single action.-
1. when I will run, I want to see Sencha Tourch framework and it will retrieve JSON data as well.

What should I modify?

Salva
8 Feb 2011, 3:09 AM
Mmm.. if the store is correctly configured (with autoload: true), when Sencha renders the view it should automatically request the /home/index url and load/render the data.

If it doesn't, check in the Resources panel (in the development panel in Safari/Chrome) to see whether the url (/home/index) is being requested, and what is being returned.

Riaz
8 Feb 2011, 6:41 PM
Mmm.. if the store is correctly configured (with autoload: true), when Sencha renders the view it should automatically request the /home/index url and load/render the data.

If it doesn't, check in the Resources panel (in the development panel in Safari/Chrome) to see whether the url (/home/index) is being requested, and what is being returned.



My previous query made you confused . Whatever you said I did before. My confusion is in different scenario:
1. I have a method in Home controller such as – Contacts.
2. I want to do return ‘JSon’ as well as ‘View ‘ from the ‘Contacts’ method.
Is it possible?


Currently what I am doing –
1. In the Index, I am returning JSON
2. Then “Contacts” method I am returning Contacts View
3. In the Contacts View I have a .js file
4. When I am type http://.../Home/Contacts, I am getting result.

If I make you more confused, please inform me. Waiting for your replay.

Any suggestion will be appreciated.


Q2: Suppose I am in Project Tab and if I click on Contact Tab , the request should me in the "Contact" method of Home Controller.

How do I do that?

Riaz
8 Feb 2011, 9:22 PM
I solved the above issues. Thanks Salva for your kind help.

Riaz
13 Feb 2011, 8:24 PM
Salva

You helped before to solve my problem.

Could you please see the link and give me some advice

http://www.sencha.com/forum/showthread.php?123854-Problem-to-select-item-on-the-List-items&p=570631#post570631