Jquery mobile collapsable content, wiring up to a DB...

LordNorbury

Hi folks,

New to (and struggling with!), MVC... I have a view in my solution that lets a user login to my mobile website and order _Product1, _Product2 and _Product3 from a jquery themed view, based on a few checkboxes on the page. It looks great on mobile and works exactly as I want it to work/ It uses a DBContext to access my DB and save each ticked checkbox as a product that was ordered by the user. I also insert the user's Guid into my products DB as part of this database updating process. So depending on how many checkboxes are ticked (say 3 boxes), when the user hits the submit button, 3 new records are created on my Products table in my DB. This is done using my a Product model and a DB context.

When the user hits the submit button, I want to return them to a different view that displays the data that has just been inserted by them. I am very new to MVC, previously I would have done this using webforms by deploying an SQLDataSource with a select query in tandem with the user's GUID set up as a Select Parameter for the SQLDataSource.

My only problem here is that I haven't a notion how to do this using MVC. I previously used GridViews in Webforms a lot and they could be easily wired up to an SQlDatasource and by changing the select parameter, I could easily change the data.

I'm asking is there an easy enough way to do this using MVC, possibly using a DBContext (as I have this set up at the mo and I know it is working as it is inserting the data a user selects using checkboxes, into my DB).

I'm trying to "wire up" this data in my DB to a jquery mobile collapsible set, and all the Googling I'm doing, I'm getting absolutely lost in Ajax type solutions and JS type solutions, I'm wondering can I just use some C# code in my controller to populate my jquery mobile collapsible view with some simple data from my DB, selected by the user's GUID?

Many thanks to folks in advance for any help with this.


My View to display data (static data at the mo, I want this to be data from my DB Product table)...

[HTML]
<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="true">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>

<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>

<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible set content for section 3.</p>
</div>

<div data-role="collapsible">
<h3>Section 4</h3>
<p>I'm the collapsible set content for section 4.</p>
</div>

<div data-role="collapsible">
<h3>Section 5</h3>
<p>I'm the collapsible set content for section 5.</p>
</div>
</div>


[/HTML]

My model:

[HTML]
public class Product
{

public Int32 ID { get; set; }

public string ProductName { get; set; }

public string ProductDescription { get; set; }

public string ProductCategory { get; set; }

public string UserID { get; set; }

}

public class ProductDBContext : DbContext
{
public DbSet<Product> ProductDBs { get; set; }

}
[/HTML]

LordNorbury

What I'm basically trying to do is mash CRUD or even just the "R" in CRUD, with Jquery Mobile... I just can't find the controller code anywhere on the web.

John_Mc

LordNorbury wrote: »

What I'm basically trying to do is mash CRUD or even just the "R" in CRUD, with Jquery Mobile... I just can't find the controller code anywhere on the web.

Your View should be strongly typed against the model, I'm going to assume this is the case.

I would move the DbContext outside of the model, and put it in a separate project along with your models.

Your controller action should be something like this:

[HttpGet]
public actionresult Index(string userId)
{
 var context = new ProductDBContext(); //consider having this injected into your constructor but lets keep it simple for now

var product = context.ProductDBs.FirstOrDefault(p=>p.UserID==userId);

return View(product);
}

For the above to work your view needs to be called "Index" and located in the corresponding folder for your Controller.

It should also be strongly typed against Product

Once you have that working, it's easy with the razor syntax. Wherever you want to render a value from the Model, use the syntax @Model.UserId or @Model.ProductName

LordNorbury

John_Mc wrote: »

Your View should be strongly typed against the model, I'm going to assume this is the case.

I would move the DbContext outside of the model, and put it in a separate project along with your models.

Your controller action should be something like this:

[HttpGet]
public actionresult Index(string userId)
{
 var context = new ProductDBContext(); //consider having this injected into your constructor but lets keep it simple for now

var product = context.ProductDBs.FirstOrDefault(p=>p.UserID==userId);

return View(product);
}

For the above to work your view needs to be called "Index" and located in the corresponding folder for your Controller.

It should also be strongly typed against Product

Once you have that working, it's easy with the razor syntax. Wherever you want to render a value from the Model, use the syntax @Model.UserId or @Model.ProductName

Huge thanks for that advice John. I went at this earlier today and used the scaffolding tool in MVC whyen creating a controller, that creates the CRUD views and all automatically.
I can see data from my DB now on the index view that was automatically created when I used the scaffolding that automatically built the Views (Details, Create, Delete, Index, Edit), when MS Studio 2012 did this, it has at the start of every view:

[HTML]@model IEnumerable<MyMvcSolution.Models.Products>[/HTML]

When I put your code into the controller now for my Index view, I'm getting the error:

The model item passed into the dictionary is of type 'MyMvcSolution.Models.Product', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[MyMvcSolution.Models.Product]'.

I've tried changing:

[HTML]@model IEnumerable<MyMvcSolution.Models.Products>[/HTML]

to

[HTML]@model MyMvcSolution.Models.Product[/HTML]

Then I'm getting an error when the @ForEach in my Index view tries to run, says no definition for GetEnumerator()...?

Sorry these requests are so basic, once I get to the point where I can insert data into my DB and can read it back from my DB, I'll usually fly along then from there...

John_Mc

The code I wrote there was for a single Product. If your Model is a List<Product> or some other collection, you can do the following:

@foreach(var product in Model)
{
<h2>@product.ProductName</h2>
<p>@product.ProductDescription</p>
<input type="hidden" value="@product.Id"/>
}

Giblet

Change the view model type back to the ienumerable, and change

return View(product);

to

return View(new [] {product});

John_Mc

Giblet wrote: »

Change the view model type back to the ienumerable, and change

return View(product);

to

return View(new [] {product});

It's either 1 or many and the Model should reflect that though. What you've suggested is retrieving 1 record from the Db and passing it as a collection to the view

LordNorbury

Giblet wrote: »

Change the view model type back to the ienumerable, and change

return View(product);

to

return View(new [] {product});

Thanks a mil for that John & Giblet, only thing is that it is only returning one row of data whereas I have several rows in my DB where UserID as myself lofgged in equals UserId in my DB? Is this solution meant to return just one row of data or is it meant to work like an SQL Select statement, as in SELECT * WHERE @UserID = UserID?

EDIT: I see this is down to FirstorDefault, I'm brand new to LINQ and MVC so just getting my head around how this data selecting works. Really miss Webforms and SQLDataSource and GridViews!

Giblet

John_Mc wrote: »

It's either 1 or many and the Model should reflect that though. What you've suggested is retrieving 1 record from the Db and passing it as a collection to the view

I know, the model shouldn't ever be a domain model either, but I'm trying to get the guy a result

LordNorbury

Giblet wrote: »

I know, the model shouldn't ever be a domain model either, but I'm trying to get the guy a result

Is there a setting I can use instead of .FirstorDefault, that will return all the rows I require? I tried using .All but it errored out...

Giblet

ToList();

Aswerty

I'm finding it hard to follow what's going on here but as to your last question:

context.ProductDBs.Where(p=>p.UserID==userId)

or if you want an IList<> to be returned instead of an IEnumerable<>:

context.ProductDBs.Where(p=>p.UserID==userId).ToList()

It would probably be useful if you had posted the Controller in question because that appears to be the point in your code for which you are having trouble.

LordNorbury

First of all folks, huge thanks for the help with this. I'm getting an error each time I try either:

[HTML]context.ProductDBs.Where(p=>p.UserID==userId)[/HTML]

Or:

[HTML]context.ProductDBs.Where(p=>p.UserID==userId).ToList()[/HTML]

And each error seems to indicate a mismatch between the first line of my code in my View, and each line above:

[HTML]
@model IEnumerator<MyMVCSolution.Models.Product>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.MobileThemeroller.cshtml";
}

@foreach (var item in Model) {

<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="true">
<h3>@Html.DisplayFor(modelItem => item.ID)</h3>
<p>@Html.DisplayFor(modelItem => item.Timestamp)</p>
<p>@Html.DisplayFor(modelItem => item.ClientID)</p>
<p>@Html.DisplayFor(modelItem => item.ProductSolution)</p>
<p>@Html.DisplayFor(modelItem => item.Owner)</p>
</div>

</div>
}
[/HTML]

This actually works (for one DB record only), when I used:

[HTML]var product = context.ProductDBs.FirstOrDefault(p=>p.UserID==userId);[/HTML]

The only problem being that it only returned the first line of code that met the criteria, whereas there are another few lines that meet the UserID criteria...

I've tried changing 'IEnumerable' at the top of my View for 'List' or 'IQuerable', but I'm still getting the respective errors below...

The model item passed into the dictionary is of type 'System.Linq.IQueryable`1[MyMVCSolution.Models.Product][]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[MyMVCSolution.Models.Product]'.

I get this error when using:

[HTML]var product = context.ProductDBs.Where(p => p.UserID == UserId);[/HTML]

And I get the following error


The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[MyMVCSolution.Models.Product][]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[MyMVCSolution.Models.Product]'.

when using:

[HTML]
context.ProductDBs.Where(p=>p.UserID==userId).ToList()
[/HTML]

Here is my Controller:

[HTML]
[HttpGet]
public ActionResult ViewMyQueries(string UserId)
{

Guid userGuid = (Guid)Membership.GetUser().ProviderUserKey;

UserId = userGuid.ToString();



var context = new ProductDBContext(); //consider having this injected into your constructor but lets keep it simple for now

var product = context.ProductDBs.Where(p => p.UserID == UserId).ToList();

//var product = context.ProductDBs.Where(p => p.UserID == UserId);

return View(new[] { product });
}
[/HTML]

Here is my View:

[HTML]
@model IEnumerable<MyMVCSolution.Models.Product>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.MobileThemeroller.cshtml";
}

@foreach (var item in Model) {

<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="true">
<h3>@Html.DisplayFor(modelItem => item.ID)</h3>
<p>@Html.DisplayFor(modelItem => item.Timestamp)</p>
<p>@Html.DisplayFor(modelItem => item.ClientID)</p>
<p>@Html.DisplayFor(modelItem => item.ProductSolution)</p>
<p>@Html.DisplayFor(modelItem => item.Owner)</p>
</div>

</div>
}
[/HTML]

My Model is unchanged as per an earlier post...

Giblet

Oh man, it's a bit mixed up, probably my fault!

[HttpGet]
        public ActionResult ViewMyQueries(string UserId)
        {

            Guid userGuid = (Guid)Membership.GetUser().ProviderUserKey;

            UserId = userGuid.ToString();



            var context = new ProductDBContext(); //consider having this injected into your constructor but lets keep it simple for now

            var products = context.ProductDBs.Where(p => p.UserID == UserId);

    

            return View(products);
        }

View is fine as it is.

Are there multiple products which match the userid, or only one?

LordNorbury

Giblet wrote: »

Oh man, it's a bit mixed up, probably my fault!

[HttpGet]
        public ActionResult ViewMyQueries(string UserId)
        {

            Guid userGuid = (Guid)Membership.GetUser().ProviderUserKey;

            UserId = userGuid.ToString();



            var context = new ProductDBContext(); //consider having this injected into your constructor but lets keep it simple for now

            var products = context.ProductDBs.Where(p => p.UserID == UserId);

    

            return View(products);
        }

View is fine as it is.

Are there multiple products which match the userid, or only one?

Multiple, around 5-10 but it could be any number really, depending on how many product queries the client has created using other view...

Is it possible to apply another second data filter, the MVC/Linq equivalent of what I would have previously done using Webforms in SQL with something like:

String QueryStatus = "Open";

SELECT * From [Product] WHERE (UserId = @UserID AND QueryStatus = @QueryStatus);

Huge thanks for your help with this, am working on this all weekend to have it ready for Monday hopefully!

John_Mc

.ToList() will create a list populated with Products returned from your Db. Your view is backed by an IEnumerable<Product> so that's fine as a List can be transformed into just IEnumerable.

Note however that you're returning from the Controller Action return View(new[] { product });

"product" should be renamed to "products" here as it is multiple Products instead of single, and your return should just be "return View(products);"

The error you're getting can be caused by your model being null in the view. This is what I'd be looking at first. Also note that you can set breakpoints in your view on the Razor/C# to assist with troubleshooting.

LordNorbury

Huge thanks for all the help with this, have it running now, just copied & pasted the one outstanding query I have with this below:

Is it possible to apply another second data filter, the MVC/Linq equivalent of what I would have previously done using Webforms in SQL with something like:

String QueryStatus = "Open";

SELECT * From [Product] WHERE (UserId = @UserID AND QueryStatus = @QueryStatus);

John_Mc

LordNorbury wrote: »

Huge thanks for all the help with this, have it running now, just copied & pasted the one outstanding query I have with this below:

Is it possible to apply another second data filter, the MVC/Linq equivalent of what I would have previously done using Webforms in SQL with something like:

String QueryStatus = "Open";

SELECT * From [Product] WHERE (UserId = @UserID AND QueryStatus = @QueryStatus);

Yes it is possible to do this very easily. Add an additional parameter to your Controller Action. Something like this if it's optional.

string status = null

var query = dbContext.Products.Where(p=>p.UserId==userId);

if(!string.IsNullOrEmpty(status))
{
query = query.Where(p=>p.Status==status);
}

var results = query.ToList(); //this executes your query and retrieves the results into memory

return View(results);

Some suggestions:

1. Put this type of logic in a separate class(es) which serves as your data and/or business logic layer. Controller actions should be short
2. Consider adding a ProductStatus enumeration instead of just a string

LordNorbury

I have all that sorted now and it all works fine, except for one thing...!

The code below:

[HTML] <div data-role="main" style="background-color:white;">

<fieldset data-role="collapsible" data-theme="d" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="background-color:white; color:white;">
<legend>My Collapsible Content</legend>
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="d">
<p>Favorite Color:</p>
<div data-role="controlgroup">
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue" data-theme="d">
</div>
<input type="submit" data-inline="true" value="Submit" data-theme="d">
</fieldset>
</div>[/HTML]
When it is outside of the code below, it themes perfectly, however when it is inside the code below, my checkboxes lose their theming???

[HTML]
@using (Html.BeginForm("PostMyProductOrder", "Home", FormMethod.Post))
{
foreach (var item in Model) {

//My Collapsible Content code above should go here as I am trying to create each field set dynamically...


}}
[/HTML]

Once my colllapsible code is outside the @Using ...{} code, my theming works fine, once it goes inside, the theming is still there but the checkboxes are not themed which makes the solution useless!

I also want to use my model to bind data to my DB and present this dynamically within my collapsible set, (I can do this fine and this works for me, the data binds properly as per the code below, the only issue is that my checkboxes will not theme properly and actually look very shítty as in there is no theming at all) so I lose access to that when it is placed outside the {}...

This code below works perfectly only the checkbox will not theme and looks completely unthemed/****ty:

[HTML]@model IEnumerable<MyMVCSolution.Models.Product>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.MobileThemeroller.cshtml";
}
@using (Html.BeginForm("PostMyOrder", "Home", FormMethod.Post))
{
foreach (var item in Model) {



<div data-role="collapsible" data-theme="d" data-content-theme="d" data-collapsed="true" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">

<h3>@Html.DisplayFor(modelItem => item.ProductID)<br />@Html.DisplayFor(modelItem => item.ProductMake) @Html.DisplayFor(modelItem => item.ProductModel)<br />@Html.DisplayFor(modelItem => item.Status)</div></h3>
<ul data-role="listview" data-inset="false" data-theme="d">
<li><b>Created: </b>@Html.DisplayFor(modelItem => item.Timestamp)</li>
<li><b>Owner: </b>@Html.DisplayFor(modelItem => item.ClientID)</li>
<li>@Html.DisplayFor(modelItem => item.ProductPrice)</li>
<li>@Html.DisplayFor(modelItem => item.Owner)</li>
<li>@Html.CheckBoxFor(modelItem => item.Ordered, new {id=Html.NameFor(x => item.Ordered)})
<li><input type="submit" value="ORDER" style="background-color:#808080;"/></li>

</ul>
</div>
}
}[/HTML]

Code below themes perfectly but checkboxes will not theme when it is used to replace the collapsible code above:

<div data-role="main" style="background-color:white;">

<fieldset data-role="collapsible" data-theme="d" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="background-color:white; color:white;">
<legend></legend>
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="d">
<p>Favorite Color:</p>
<div data-role="controlgroup">
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue" data-theme="d">
</div>
<input type="submit" data-inline="true" value="Submit" data-theme="d">
</fieldset>

</div>

Basically I'm trying to get across here that I need the theming of the code above, with the dynamic aspect to the other solution I posted above where I can bind my DB data to the view via my model. Hoping someone will spot where I'm going wrong here...

John_Mc

To be fair it's going to be one thing after another as you're learning everything from scratch as you go. You'd be better off using StackOverflow to search through and post questions, than on here.

A lot of programming these days is about being able to effectively search for issues you run into. Over time you'll get better at deciding on the best search term, and when results match the situation you're facing.

Regarding the jQuery mobile styling, I'd imagine it's because the list view is being dynamically generated. This is an issue with jQuery mobile and not MVC/.Net.

Here's one answer I got from searching google for "jquery mobile dynamic listview".

LordNorbury

John_Mc wrote: »

To be fair it's going to be one thing after another as you're learning everything from scratch as you go. You'd be better off using StackOverflow to search through and post questions, than on here.

A lot of programming these days is about being able to effectively search for issues you run into. Over time you'll get better at deciding on the best search term, and when results match the situation you're facing.

Regarding the jQuery mobile styling, I'd imagine it's because the list view is being dynamically generated. This is an issue with jQuery mobile and not MVC/.Net.

Here's one answer I got from searching google for "jquery mobile dynamic listview".

I know, I'm sorry for the endless queries, I've googled the shít out of this over the weekend and am not finding the solution. When I was developing in Webforms, I had none of this, if you understood the basics of C# and the webforms toolkit and some CSS, you could get your site up to a certain standard. I'm trying to learn MVC having previously developed using webforms and have decided to do my mobile site in MVC and JQM and I'm running into issues with all these other add ons like JQM, etc and before that Bootstrap, these packages that apparently let you theme, integrate and manage your front end with ease! :eek::eek::eek:

LordNorbury

In fairness to myself, I can't understand why theming would work on all dynamically created controls except for one (checkbox)...

John_Mc

I know that feeling because I too had to learn MVC coming from Webforms land which is practically the same as WinForms.

You're jumping into the deep end because web development involves many disciplines and technologies (HTML, CSS, Javascript, HTTP etc). Couple that with a new programming paradigm like MVC and you're bound to have a very steep learning curve.

The plugins you're using might seem like additional work but believe me, doing it from scratch would be impossible for you!

LordNorbury

John_Mc wrote: »

I know that feeling because I too had to learn MVC coming from Webforms land which is practically the same as WinForms.

You're jumping into the deep end because web development involves many disciplines and technologies (HTML, CSS, Javascript, HTTP etc). Couple that with a new programming paradigm like MVC and you're bound to have a very steep learning curve.

The plugins you're using might seem like additional work but believe me, doing it from scratch would be impossible for you!

It seems that when you dynamically create controls within JQM, as I am trying to do, you have to "manually enhance" each control in order for it to properly theme with JQM... This requires me to go off and learn JS which I have no knowledge of, same for AJAX! No sooner would I have my head around all this and MVC and all of it's associated packages and bits and pieces, will be replaced with something newer!

http://www.gajotres.net/jquery-mobile-and-how-to-enhance-the-markup-of-dynamically-added-content/

LordNorbury

Just a quick question, see this JS Fiddle solution link below?

http://jsfiddle.net/Gajotres/VAG6F/

Where does this JS code actually go in my solution?

$(document).on('pagebeforeshow', '#index', function(){
// Add a new radio element
$('[data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose a pet:</legend><input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /><label for="radio-choice-1">Cat</label><input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /><label for="radio-choice-2">Dog</label></fieldset>');
$('[data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Agree to the terms:</legend><input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /><label for="checkbox-1">I agree</label></fieldset>');
// Enhance new radio element
$('[type="radio"]').checkboxradio();
$('[type="checkbox"]').checkboxradio();
// Select another radio element
$("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");
$("input[type='radio']").eq(1).attr("checked",true).checkboxradio("refresh");
});

LordNorbury

Be Gob & Be Gorrah, adding this to my code and it has sorted the issue, well almost, it has themed by checkbox, although it still seems to be in a container that it shouldn't be inside:

[HTML]
<script>$('[type="checkbox"]').checkboxradio();</script>[/HTML]

:cool::cool::cool:

Just wanted to say thanks again to every one thread, I've been given huge help here and really appreciate it.