Twitter Bootstrap: Drop down list + Modal

How to combine the uses of  drop down list and modal together?

Let’s say we got a drop down like the following

<ul class=”nav nav-pills”>

<li class=”dropdown”>>

<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#” id=”dLabel” role=”button”>Index one<b></b></a>

<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dLabel”>

<li><a tabindex=”-1″ href=”#” data-target=”#modal” data-slide-to=”0″>Index one</a></li>

<li><a tabindex=”-1″ href=”#” data-target=”#modal” data-slide-to=”1″>Index two</a>

</ul>

</li>

</ul>

Say you have a modal like the following:

<div id=”modal” class=”carousel slide” data-interval=”false”>

<ol class=”carousel-indicators”>>

<li data-target=”#modal” data-slide-to=”0″></li>

<li data-target=”#modal” data-slide-to=”1″></li>

</ol>

<div class=”carousel-inner”>

<div class=”active item”>

Item One

</div>

<div class=”item”>

Item Two

</div>

</div>

<a href=”#modal” data-slide=”prev”>&lsaquo;</a>

<a href=”#modal” data-slide=”next”>&rsaquo;</a>

</div>

To update your selected text with drop down

//bind the slid even

$(“#menu”).bind(“slid”, function () {

//update the label with modal selected index read from the drop down list index

$(“#dLabel”).html($(“.dropdown-menu li a[data-slide-to='” + $(“.carousel-inner .active”).index() + “‘]”).text() + “<b class=’caret’></b>”);

});

Entity Framework: Dynamic Sorting

Scenario:

Sorting and paging on a ASP grid with Entity Framework data source

Problem:  

we can’t do that as simple as the following:

Object.OrderBy(ObjectProperty)

Solution

Lets say we have the class like the following in Entity Framework:

public Project {

int ID {get;set;}

string Name {get;set;}

}

We need to write our custom Expression to achieve the sorting, and let’s say we just want to order it by ascending for now.

 

public List<Project> GetProjects(int startRowIndex, int maximumRow, string sortParameter) {

//Default Sorting, sort by Project ID

Func<Project, object> orderExpression = p => p.ID;

switch(sortParameter) {

case “Name”:

orderExpression = p => p.Name;

break;

}

using(var context = new xxxEntities()) {

//Order by sort expression, skip x number of rows, take the current page size of entities

return context.Projects.OrderBy(orderExpression).Skip(startRowIndex).Take(maximumRows).ToList();

}

}

 

WCF & AJAX: My submitted changes does not update in IE but on other browsers

Scenario:
My view doesn’t get updated when I submitted data through WCF service in IE with jQuery $.getJSON, $.ajax, etc…

But it works in chrome, Firefox, etc…

Why?

Because by default in IE, all the service request will get cached in the browser.

Solution:

We need to force the browser to not to do any caching on with ajax call in jQuery

  1. To do it globally, add the following line when document ready, $.ajaxSetup({ cache: false });
  2. To do it specifically within the method

$.ajax({
url: url,
type: “POST”,
cache: false,
contentType: “application/json; charset=utf-8”,
data: data,
dataType: “json”,
success: function (data) {

},
error: function (msg) {

}
});