Server.MapPath()
System.Web.HttpContext.Current.Server.MapPath()
First thing is first, you will need to download
jQuery
and the
Jeditable
plugin (I prefer to refer to it as the Jedi-Table!).
Be sure to put these references in your View (or Masterpage).
Next, you have to set up a view on which to use an inline edit.
I find that I often want to use this approach on tables of information.
For this View, I will set it to use an IEnumerable of an Item I have called 'ItemOwner' (this is arbitrary and does not really matter).
It will be a simple table that lists the Name and the Country of the owner, both of which will be editable inline.
Here is the Index in my ExampleController.cs:
myDataContext db = new myDataContext();
public ActionResult Index()
{
// get the info for the 'Countries' dropdown:
ViewData["countries"] = db.Countries
.Select(x => new SelectListItem()
{
Text = x.Name,
Value = x.Id.ToString()
}).ToJson();
// get the 'ItemOwners' I am interested in:
var owners = db.ItemOwners.Take(3);
return View(owners);
}
public static string
ToJson(this IEnumerable<SelectListItem> slis)
{
string output = "{";
if (slis != null)
{
for (int i = 0; i < slis.Count(); i++)
{
output += " '" + slis.Skip(i)
.First().Value + "': '" +
slis.Skip(i).First().Text + "'" +
(i == slis.Count() - 1 ? " " : ",");
}
}
return output += "}";
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<% foreach(var owner in Model) { %>
<tr>
<td><%= owner.Name %></td>
<td><%= owner.Country.Abbreviation %></td>
</tr>
<% } %>
</tbody>
</table>
<td id="name<%= owner.Id %>" class="editable text">
<%= owner.Name %></td>
<td id="ctry<%= owner.Id %>" class="editable dropdown">
<%= owner.Country.Abbreviation %></td>
td.editable:hover
{ cursor:pointer; background-color:Orange; }
function InlineDropdown(collectionToDropDown, ajaxAddress, dropDownDataSet) {
collectionToDropDown.editable(ajaxAddress,
{
data: dropDownDataSet,
type: 'select',
indicator: 'saving...',
tooltip: 'click to edit...',
submit: 'Save',
style: 'inherit',
placeholder: 'click to edit'
});
}
function InlineTextbox(collectionToInline, ajaxAddress) {
collectionToInline.editable(ajaxAddress,
{
indicator: 'saving...',
tooltip: 'click to edit...',
style: 'inherit',
placeholder: 'click to edit'
});
}
function InlineTextarea(collectionToInline, ajaxAddress) {
collectionToInline.editable(ajaxAddress,
{
type : 'textarea',
rows : 4,
indicator : 'saving...',
tooltip : 'click to edit...',
style : 'inherit',
submit : 'Save',
onblur : 'ignore',
placeholder : 'click to edit'
});
}
InlineTextbox(
$('td.editable.text'),
"<%= Url.Content("~/Ajax/ItemOwner.ashx") %>"
);
InlineDropdown(
$('td.editable.dropdown'),
"<%= Url.Content("~/Ajax/ItemOwner.ashx") %>",
<%= ViewData["countries"].ToString() %>
);
public void ProcessRequest(HttpContext context)
{
string newValue;
try
{
myDataContext db = new myDataContext();
string elementId = context.Request.Form["id"];
// since we made the first 4 of the id the 'field' whic to edit
// we can just pull the first 4 letters for use in our switch:
string fieldToEdit = elementId.Substring(0, 4);
//now take anything after those 4 and it is the Id:
int idToEdit = Convert.ToInt32(elementId.Remove(0, 4));
// the value is simply a string:
newValue = context.Request.Form["value"].Trim();
// now that we have the id, get the ItemOwner from the db
ItemOwner owner = db.ItemOwners.FirstOrDefault(x => x.Id == idToEdit);
// after all is said and done, we will return newValue to the user so the field
// looks as if the change has taken place (which it has)
// using the field we pulled above, decide what to do:
switch (fieldToEdit)
{
// name is easy
case "name": owner.Name = newValue; break;
// since the country is an integer foreign key, we need to Convert.ToInt32:
case "ctry":
owner.CountryId = Convert.ToInt32(newValue);
// now that we have recorded the value, we want to return the text to
// the user and not the id value which would make no sense
newValue = db.Countries.FirstOrDefault(x => x.Id == owner.CountryId).Abbreviation;
break;
// if it wasn't caught, something is wrong:
default: throw new Exception("invalid fieldToEdit passed");
}
db.SubmitChanges(); // save it
}
// now if an exceptions were reported, the user can see what happened
// this also inform the user nothing was saved
// you could easily make this not reported to the user and logged elsewhere
catch (Exception ex)
{ newValue = "Error: " + ex.Message + " [nothing written to db]"; }
//now return what you want in the element:
context.Response.Write(newValue);
}
First thing is first, you will need to download
jQuery
and the
Jeditable
plugin (I prefer to refer to it as the Jedi-Table!).
Be sure to put these references in your View (or Masterpage).
Next, you have to set up a view on which to use an inline edit.
I find that I often want to use this approach on tables of information.
For this View, I will set it to use an IEnumerable of an Item I have called 'ItemOwner' (this is arbitrary and does not really matter).
It will be a simple table that lists the Name and the Country of the owner, both of which will be editable inline.
Here is the Index in my ExampleController.cs:
myDataContext db = new myDataContext();
public ActionResult Index()
{
// get the info for the 'Countries' dropdown:
ViewData["countries"] = db.Countries
.Select(x => new SelectListItem()
{
Text = x.Name,
Value = x.Id.ToString()
}).ToJson();
// get the 'ItemOwners' I am interested in:
var owners = db.ItemOwners.Take(3);
return View(owners);
}
public static string
ToJson(this IEnumerable<SelectListItem> slis)
{
string output = "{";
if (slis != null)
{
for (int i = 0; i < slis.Count(); i++)
{
output += " '" + slis.Skip(i)
.First().Value + "': '" +
slis.Skip(i).First().Text + "'" +
(i == slis.Count() - 1 ? " " : ",");
}
}
return output += "}";
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<% foreach(var owner in Model) { %>
<tr>
<td><%= owner.Name %></td>
<td><%= owner.Country.Abbreviation %></td>
</tr>
<% } %>
</tbody>
</table>
<td id="name<%= owner.Id %>" class="editable text">
<%= owner.Name %></td>
<td id="ctry<%= owner.Id %>" class="editable dropdown">
<%= owner.Country.Abbreviation %></td>
td.editable:hover
{ cursor:pointer; background-color:Orange; }
function InlineDropdown(collectionToDropDown, ajaxAddress, dropDownDataSet) {
collectionToDropDown.editable(ajaxAddress,
{
data: dropDownDataSet,
type: 'select',
indicator: 'saving...',
tooltip: 'click to edit...',
submit: 'Save',
style: 'inherit',
placeholder: 'click to edit'
});
}
function InlineTextbox(collectionToInline, ajaxAddress) {
collectionToInline.editable(ajaxAddress,
{
indicator: 'saving...',
tooltip: 'click to edit...',
style: 'inherit',
placeholder: 'click to edit'
});
}
function InlineTextarea(collectionToInline, ajaxAddress) {
collectionToInline.editable(ajaxAddress,
{
type : 'textarea',
rows : 4,
indicator : 'saving...',
tooltip : 'click to edit...',
style : 'inherit',
submit : 'Save',
onblur : 'ignore',
placeholder : 'click to edit'
});
}
InlineTextbox(
$('td.editable.text'),
"<%= Url.Content("~/Ajax/ItemOwner.ashx") %>"
);
InlineDropdown(
$('td.editable.dropdown'),
"<%= Url.Content("~/Ajax/ItemOwner.ashx") %>",
<%= ViewData["countries"].ToString() %>
);
public void ProcessRequest(HttpContext context)
{
string newValue;
try
{
myDataContext db = new myDataContext();
string elementId = context.Request.Form["id"];
// since we made the first 4 of the id the 'field' whic to edit
// we can just pull the first 4 letters for use in our switch:
string fieldToEdit = elementId.Substring(0, 4);
//now take anything after those 4 and it is the Id:
int idToEdit = Convert.ToInt32(elementId.Remove(0, 4));
// the value is simply a string:
newValue = context.Request.Form["value"].Trim();
// now that we have the id, get the ItemOwner from the db
ItemOwner owner = db.ItemOwners.FirstOrDefault(x => x.Id == idToEdit);
// after all is said and done, we will return newValue to the user so the field
// looks as if the change has taken place (which it has)
// using the field we pulled above, decide what to do:
switch (fieldToEdit)
{
// name is easy
case "name": owner.Name = newValue; break;
// since the country is an integer foreign key, we need to Convert.ToInt32:
case "ctry":
owner.CountryId = Convert.ToInt32(newValue);
// now that we have recorded the value, we want to return the text to
// the user and not the id value which would make no sense
newValue = db.Countries.FirstOrDefault(x => x.Id == owner.CountryId).Abbreviation;
break;
// if it wasn't caught, something is wrong:
default: throw new Exception("invalid fieldToEdit passed");
}
db.SubmitChanges(); // save it
}
// now if an exceptions were reported, the user can see what happened
// this also inform the user nothing was saved
// you could easily make this not reported to the user and logged elsewhere
catch (Exception ex)
{ newValue = "Error: " + ex.Message + " [nothing written to db]"; }
//now return what you want in the element:
context.Response.Write(newValue);
}
In this first installment of performance tuning tricks for ASP.NET and IIS 7 we will look at some of the easy, yet powerful possibilities in the web.config file. By taking advantage of these few tricks we can increase the performance of any new or existing website without changing anything but the web.config file.
The following XML snippets must be placed in the <system.webServer> section of the web.config.
You’ve always been able to perform HTTP compression in ASP.NET by using third-party libraries or own custom built ones. With IIS 7 you can now throw that away and utilize the build-in compression available from the web.config. Add the following line to enable HTTP compression:
<urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>
By default, only text based content types are compressed.
Setting this attribute to true enables compression of dynamically generated content such as pages, views, handlers. There really aren’t any reasons not to enable this.
This attribute allows you to decide whether or not you want static files such as stylesheets and script files to be compressed. Images and other non-text content types will not be compressed by default. This is also something you want to enable.
If you do output caching from within your ASP.NET website, you can tell IIS 7 to compress the output before putting it into cache. Only if you do some custom output caching you might run into issues with setting this to true. Try it and test it. If your website works with this enabled, then you definitely want to keep it enabled.
By default, only text based content types are compressed. That means if you send application/x-javascript as content type, you should change it to text/javascript. If you use some custom modules in your website, then you might experience conflicts with the IIS 7 compression feature.
To speed up the load time for the visitors, it is crucial that everything that can be cached by the browser IS cached by the browser. That includes static files such as images, stylesheets and script files. By letting the browser cache all these files means it doesn’t need to request them again for the duration of the cache period. That saves you and your visitors a lot of bandwidth and makes the page load faster. A well primed browser cache also triggers the load and DOMContentLoaded event sooner.
By adding this snippet to your web.config, all static files are cached in the browser for 1 year:
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
</staticContent>
This setting sets the expiration date of the file one year in the future. It does that by setting an HTTP header that instruct the browser to add the file to its internal cache. If you hit F5 or ctrl-F5, the browser will request the files no matter what the expiration is set to.
A major problem with client-side caching is if your static files change before the cache expires. Then the visitor with the old version in the cache won’t see the new file until she clears the browser cache or hit F5. Therefore, this setting must be used with caution and probably with a shorter expiration time. In part 2 of this series I’ll address this problem and provide a simple solution to it.
Make sure that user sensitive information isn't cached on the browser. It will then be available by anyone else using the same browser.