Serie Cómo Hacer sobre MVC, jQuery, JSON, Paginación y mapRoute
Descargar Código Fuente
Introducción
Debido a la gran cantidad de datos en los sistemas de bases de datos, el trabajo del lado del cliente se ha vuelto muy importante. En el enfoque clásico de ASP.NET con code-behind, el método natural es codificar la mayoría del trabajo en los archivos code-behind utilizando componentes ASP.NET. Además, el renderizado de los componentes ASP.NET y el mecanismo viewstate ahora se consideran capacidades débiles del ASP.NET clásico.
Por lo tanto, surgió un nuevo paradigma. Según este nuevo paradigma, el desarrollador puede trabajar con HTML puro y JavaScript sin viewstate que reduce el rendimiento y con menos renderizado.
Aunque MVC se conoce como un patrón de diseño o arquitectura antiguo, se ha vuelto popular especialmente después de los cuellos de botella mencionados anteriormente del ASP.NET clásico. En MVC, donde jQuery y JSON se utilizan de manera efectiva, se pueden desarrollar aplicaciones de alto rendimiento.
Conocimientos Previos
Este artículo puede ser útil después de leer algunos artículos de nivel inicial sobre MVC, jQuery y JSON. Los siguientes enlaces pueden ser útiles para principiantes:
Uso del Código
En este artículo se ha propuesto una "serie de cómo hacer". Por lo tanto, todos los scripts se han tomado del código fuente adjunto. De hecho, cada "cómo hacer" podría haber sido un artículo separado. De todos modos, todas las posibles respuestas se han reunido en un solo ejemplo. En este artículo hay más enfoques prácticos que información teórica. Por ejemplo, se han utilizado algunas listas estáticas en lugar de una base de datos por simplicidad.
Se responden las siguientes preguntas:
- ¿Cómo hacer CRUD con buen rendimiento en MVC?
- ¿Cómo usar jQuery dialog en lugar de JavaScript confirm o alert?
- ¿Cómo hacer paginación en una lista MVC?
- ¿Cómo hacer un enlace "mostrar más" en MVC usando jQuery?
- ¿Cómo usar atributos con enlaces?
- ¿Cómo hacer una llamada AJAX en jQuery?
- ¿Cómo usar Form collection en MVC?
- ¿Cómo eliminar múltiples registros a la vez?
- ¿Cómo usar partial action en MVC?
- ¿Cómo usar el formato JSON en una aplicación MVC?
- ¿Cómo llenar comboboxes maestro-detalle?
- ¿Cómo usar jQuery datepicker?
- ¿Cómo cargar una imagen en MVC con jQuery dialog?
- ¿Cómo crear una fila de tabla en el lado del cliente?
- ¿Cómo personalizar mapRoute en Global.asax?
- ¿Cómo checkALL y uncheckALL de todas las filas de la tabla?
- ¿Cómo hacer "Loading Data"?
- ¿Cómo hacer grids maestro-detalle con jQuery?
1) ¿Cómo hacer CRUD con buen rendimiento en MVC?
En términos generales, todas las soluciones empresariales tienen la característica Create-Read-Update-Delete (Crear-Leer-Actualizar-Eliminar). Si es posible, usar el mismo "formulario de guardar" tanto para "insert" como para "update" puede ser rentable desde la perspectiva del desarrollador. Usar el mismo formulario es posible gestionando los parámetros enviados a la action.
Suponga que tiene una lista tipo grid (en realidad una tabla HTML) en el formulario y un botón "new" separado. Cada fila de la tabla tiene un botón "edit" y "delete" relacionado con esa fila.
Después de hacer clic en "New", redirigir a una nueva página - aquí llamada view - no es una forma eficiente. Porque después de guardar los datos en la página redirigida, el usuario necesita hacer clic en "mostrar lista" para ver los datos añadidos a la base de datos. ¡Esto significa redirigir a la vista de lista y seleccionar datos de la base de datos con el costo de la selección de variables!
En lugar del escenario "clic en new y listar de nuevo" expresado arriba, se puede implementar una mejor manera.
Create (Crear):
- En la vista de lista, después de hacer clic en "New", puede aparecer un "jQuery Save dialog".
- La Create view se renderiza en el jQuery dialog.
- Se completa el formulario Create y se presiona "Save".
- En el momento de presionar el botón Save, los datos pueden enviarse al controlador relacionado con un AJAX post.
- El formulario Ajax tiene una función JavaScript
onSuccess. - En el método JavaScript "
onSuccess", la nueva fila añadida se añade (prepend) al principio de la lista sin refrescar toda la lista, con el JSON que viene como parámetro a "onSuccess".
Read (Leer):
Esta es una operación de listado. Si es posible, solo deben mostrarse los datos necesarios en el formulario de lista. Se pueden utilizar las siguientes técnicas:
- paginación con combobox o números,
- implementación de "mostrar más",
- listado con filtrado.
Update (Actualizar):
- En la vista de lista, después de hacer clic en "Edit" en cualquier fila de la lista, puede aparecer el mismo "jQuery Save dialog" con los datos de la fila seleccionada.
- Como todos los pasos son los mismos que "Create", solo se modifica el método "
onSuccess" según la operación "update". - En este caso, después de la actualización de la base de datos, solo los datos en la fila editada se actualizan en la vista. De esta manera, no hay necesidad de refrescar toda la lista para ver el último registro editado.
Delete (Eliminar):
- Después de la confirmación con un jQuery dialog de apariencia agradable, después de la operación de eliminación de la base de datos, solo se elimina la fila seleccionada de la lista. Nuevamente, no hay necesidad de refrescar toda la lista.
Se utiliza el mismo dialog tanto para insert como para edit.
Los enlaces en la vista PersonList.cshtml son los siguientes:
HTML
@Html.ActionLink("New", "Save",
new { personNo = 0 }, new { @class = "newLink" })
...
@Html.ActionLink("Edit", "Save", new { personNo = item.PersonNo }, new { @class = "editLink" })
- New: El texto a mostrar.
- Save: La action en el Controller.
- personNo: El parámetro enviado a la action "Save". Si es 0, el dialog se abre vacío, si es mayor que 0, los datos de ese id se muestran en el dialog.
- newLink: El className ficticio a usar en el jQuery siguiente.
JavaScript
<div id="saveDialog" title="Person Information"></div>
<script type="text/javascript">
var linkObj;
//.....
$(document).ready(function () {
//...
$('#saveDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#savePersonForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//....
setLinks();
});
// ....
function setLinks()
{
$(".editLink, .newLink, uploadPicLink").unbind('click');
$(".editLink, .newLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#saveDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data)
{
dialogDiv.html(data);
//validation
var $form = $("#savePersonForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//...
} //end setLinks
</script>
La action Save en
PersonController es la siguiente:C#
// ...
[HttpGet]
public ActionResult Save(int personNo)
{
Person person= new Person();
person.BirthDate = DateTime.Today;
person.PersonNo = 0;
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
// ...
[HttpPost]
public JsonResult Save(Person p)
{
//...
}
// ...
2) ¿Cómo usar jQuery dialog en lugar de JavaScript confirm o alert?
Un cuadro de mensaje personalizado es posible en aplicaciones Windows. Es posible cuando se utiliza una biblioteca de componentes de terceros para la web. También es posible usar jQuery dialog en lugar de los cuadros JavaScript como los siguientes:
El enlace Delete en la vista
PersonList es el siguiente:HTML
@Html.ActionLink("Delete", "DeletePerson", new { personNo =
item.PersonNo }, new { @class = "deleteLink", @pkNo = item.PersonNo })
El código HTML y jQuery es el siguiente:
JavaScript
<div id="confirmDialog" title="Warning"></div>
<script type="text/javascript">
//...
$(".deleteLink").live("click", function (e) {
e.preventDefault();
// ..
$("#confirmDialog").html('<br/><br/>sure?');
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
// ..
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
//...
</script>
3) ¿Cómo hacer paginación en una lista MVC?
La paginación es uno de los buenos enfoques para listar datos y minimizar el costo de transferencia de datos. Se pueden implementar muchas formas de mostrar los datos. En este "cómo hacer", se ha utilizado un combobox para la paginación. Sin embargo, también es posible la numeración en la parte inferior de la página si se desea. Esto depende de la aplicación y del desarrollador. La paginación con combobox se puede desarrollar de la siguiente manera.
Primero, el lugar para los metadatos de paginación se organiza de la siguiente manera:
HTML
@model AddressBook_mvc3_jQuery.Models.Paginginfo
...
<div id="paginginfo">
<hr />
<select id="PageSelect"></select>
<span class="pagingPersonNo" style="visibility:hidden">@Model.id</span>
<span class="pagingTotalCount" style="visibility:hidden">@Model.TotalCount</span>
<span class="pagingPageSize" style="visibility:hidden">@Model.PageSize</span>
<span class="pagingSummary">aaa</span>
<hr/>
</div>
<div id="content"></div>
...
Cuando la página se carga por primera vez, el div con id "
paginginfo" se llena y la primera página de registros se muestra utilizando los siguientes scripts.JavaScript
<script type="text/javascript">
//...
function initializePaging()
{
var PersonNo = $("#paginginfo .pagingPersonNo").text();
var TotalCount = $("#paginginfo .pagingTotalCount").text();
var PageSize = $("#paginginfo .pagingPageSize").text();
var PageSelect = $("#PageSelect");
if (TotalCount==0)
{
PageSelect.html("");
$("#paginginfo").hide();
}
else
{
PageSelect.html("");
var num = Math.ceil(TotalCount/PageSize);
for (var i = 1; i <= num; i++)
{
if (i==1)
PageSelect.append($("<option selected></option>").val(i).text(i));
else
PageSelect.append($("<option></option>").val(i).text(i));
}
}
fillData(PersonNo, 1);
}
//..
function fillData(parPersonNo, parPageNo)
{
if (parPageNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetAddressList", "Address")",
data: { personNo: parPersonNo, pageNo: parPageNo },
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#content").html(data.Html);
buttonizeALL();
setLinkAbilites();
setPagingSummary(parPageNo);
}
else
{
alert('opps!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
} // if (parPageNo)
}//fillData
//...
</script>
El código de la action en el Controller es el siguiente. Como se puede ver, la lista de resultados se renderiza parcialmente utilizando el método
RenderPartialView y se coloca en el objeto JSON.C#
public class AddressController : Controller
{
//..
public JsonResult GetAddressList(int personNo, int pageNo)
{
int pageSize = 5; //it could be parameter
int skipCnt = ((pageNo - 1) * pageSize);
List<Address> list = (from x in Repository.GetAddressList() where x.PersonNo ==
personNo orderby x.AddressNo descending select x).Skip(skipCnt).Take(pageSize).ToList();
JsonResult jr = Json(new
{
Html = this.RenderPartialView("AddressList", list),
Message = "OK"
}, JsonRequestBehavior.AllowGet);
return jr;
}
//..
}
Cuando el
selecteditem del combo con id "PageSelect" cambia, se ejecuta el siguiente script jQuery.JavaScript
//..
$("#PageSelect").change(function ()
{
var $this = $(this);
var parPageNo = $this.val();
var parPersonNo = $("#paginginfo .pagingPersonNo").text();
fillData(parPersonNo,parPageNo);
});//PageSelect
//..
4) ¿Cómo hacer un enlace "mostrar más" en MVC usando jQuery?
Esta técnica se utiliza en muchos sitios web populares. Debe implementarse en listas grandes. "Mostrar más" se puede realizar de la siguiente manera:
Hay un enlace para "more" en la vista de lista.
HTML
//
<table id="NoteTable"></table>
<br />
<a href="#" style="display:none" id="more">more</a>
<div id="saveDialog" title="Notes Information"></div>
<div id="confirmDialog" title="Warning"></div>
//
Cuando se hace clic en "more", se ejecuta el siguiente script jQuery.
JavaScript
//..
//load more results
$(function ()
{
$("#more").click(function (e)
{
e.preventDefault();
var lastNoteNo = $("#NoteTable tr:last .noteNo").text();
if (lastNoteNo)
{
var PersonNo = $("#paginginfo .pagingPersonNo").text();
fillData(PersonNo, lastNoteNo);
}
//--- scroll to bottom of page ---
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, "slow");
//--- /scroll to bottom of page ---
return false;
});
});
//..
function fillData(parPersonNo, parLastNoteNo)
{
if (parPersonNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetNoteList", "Note")",
data: { personNo: parPersonNo, lastNoteNo: parLastNoteNo} ,
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#NoteTable").append(data.Html);
buttonizeALL();
setLinkAbilites();
if (data.HasMore)
$("#more").show();
else
$("#more").hide();
}
else
{
alert('opps!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
} // if
}//func
// ..
La siguiente action en el Controller devuelve el resultado JSON.
C#
public class NoteController : Controller
{
//...
public JsonResult GetNoteList(int personNo, int lastNoteNo)
{
int pageSize = 5; //it could be parameter
bool hasMore = false;
List<Note> list = null;
if (lastNoteNo == 0)
{
list = (from x in Repository.GetNoteList() where x.PersonNo == personNo
orderby x.NoteNo descending select x).Take(pageSize).ToList();
hasMore = (from x in Repository.GetNoteList() where x.PersonNo ==
personNo select x.NoteNo).Take(pageSize + 1).Count() - pageSize > 0;
}
else
{
list = (from x in Repository.GetNoteList() where x.NoteNo < lastNoteNo &&
x.PersonNo == personNo orderby x.NoteNo descending select x).Take(pageSize).ToList();
hasMore = (from x in Repository.GetNoteList() where x.NoteNo < lastNoteNo &&
x.PersonNo == personNo select x.NoteNo).Take(pageSize + 1).Count() - pageSize > 0;
}
JsonResult jr = Json(new
{
Html = this.RenderPartialView("_NoteList", list),
Message = "OK",
HasMore = hasMore
}, JsonRequestBehavior.AllowGet);
return jr;
}
// ...
}
5) ¿Cómo usar atributos con enlaces?
Esta es una buena capacidad para usar especialmente en botones como edit, delete, show detail.
Al crear la lista, la clave relacionada se añade al enlace como un atributo. En el evento click del enlace, esa clave se utiliza y la operación se realiza fácilmente.
Por ejemplo, suponga que hay un enlace delete en cada fila de una lista. Cuando se hace clic en el enlace delete en la fila, es posible usar la clave como parámetro para la "delete action" en el controller.
HTML
@Html.ActionLink("Delete", "DeletePerson", new { personNo = item.PersonNo },
new { @class = "deleteLink", @pkNo = item.PersonNo })
Cuando se verifica la fuente en el cliente, se ve la siguiente línea.
HTML
<a role="button" class="deleteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
href="/Person/DeletePerson/1" pkno="1"><span class="ui-button-text">Delete</span></a>
En el script jQuery, los atributos se utilizan de la siguiente manera. Por ejemplo, pkno es 1 y se utiliza.
JavaScript
$(".deleteLink").live("click", function (e)
{
e.preventDefault();
var pkNo = $(this).attr("pkNo");
//..
});
6) ¿Cómo hacer una llamada AJAX en jQuery?
La llamada AJAX es una muy buena capacidad para hacer una aplicación más rápida. En algunas aplicaciones con gran cantidad de datos en la base de datos, el desarrollador debe prestar atención a la baja cantidad de transferencia de datos en dos líneas de datos. La primera línea está entre la base de datos y la aplicación, y la segunda está entre la aplicación y el navegador del cliente. Para este tipo de requisitos, la llamada AJAX es muy útil.
JavaScript
//..
$.ajax({
type: "POST",
url: "/Person/DeletePerson",
data: { personNo: pkNo },
cache: false,
dataType: "json",
success: function ()
{
//..
},
error: function (jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
//..
La URL también se puede usar de la siguiente manera.
JavaScript
//..
url: "@Url.Action("DeletePerson", "Person")",
// ..
7) ¿Cómo usar Form collection en MVC?
Cuando se hace un post de un formulario, todos los elementos del formulario se envían como una colección a la action correspondiente en el controller. En el Controller, se puede utilizar cada par clave-valor. Suponga que tiene un formulario de guardar como el siguiente:
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text" name="TBPersonNo"
id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text" name="TBAddressNo"
id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
Los datos en la vista se pueden enviar a la action en el controller como un objeto modelo o como FormCollection como se muestra a continuación:
C#
//..
[HttpPost]
public JsonResult Save(FormCollection fc)
{
object obj = null;
Address addrTmp = new Address();
addrTmp.AddressNo = Convert.ToInt32(fc["TBAddressNo"].ToString());
addrTmp.AddressTypeNo = Convert.ToInt32(fc["CBAddressType"].ToString());
addrTmp.AddressText = fc["TBAddressText"].ToString();
addrTmp.CityNo = Convert.ToInt32(fc["CBcity"].ToString()); ;
addrTmp.PersonNo = Convert.ToInt32(fc["TBPersonNo"].ToString());
if (ModelState.IsValid)
{
if (addrTmp.AddressNo == 0)
{
//find last person
//if it is database system no need to this line. Probably the AddressNo would be autoincrement
addrTmp.AddressNo = Data.Repository.GetAddressList().OrderBy(x => x.AddressNo).Last().AddressNo + 1;
Data.Repository.GetAddressList().Add(addrTmp);
obj = new { Success = true,
Message = "Added successfully",
Object = addrTmp,
operationType = "INSERT",
Html = this.RenderPartialView("_addressLine", addrTmp )
};
}
else
{
Address addr = Repository.GetAddressList().Where(c => c.AddressNo == addrTmp.AddressNo).FirstOrDefault();
addr.AddressTypeNo = addrTmp.AddressTypeNo;
addr.AddressText = addrTmp.AddressText;
addr.CityNo = addrTmp.CityNo;
addr.PersonNo = addrTmp.PersonNo;
obj = new { Success = true,
Message = "Updated successfully",
Object = addr,
operationType = "UPDATE",
Html = this.RenderPartialView("_addressLine", addr )
};
}
}
else
{
obj = new { Success = false, Message = "Please check form" };
}
return Json(obj, JsonRequestBehavior.DenyGet);
}
//..
8) ¿Cómo eliminar múltiples registros a la vez?
En algunas páginas, a veces eliminar muchos registros a la vez facilita el trabajo. Eliminar múltiples registros es posible recopilando las claves de todos los registros seleccionados. Después de que todas las claves se envían al controller, la eliminación se puede realizar de la siguiente manera.
Primero se hace clic en el botón "Delete Selected" con id "deleteALL". Después de presionar Yes, se puede usar el siguiente script jQuery. Por supuesto, también se pueden desarrollar scripts alternativos.
JavaScript
//..
$("#deleteALL").live("click", function (e)
{
e.preventDefault();
var len = $("#NoteTable tr").length;
$("#confirmDialog").html('<br/><br/>deleting all selecteds.. sure?');
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons:
{
"Yes": function ()
{
$(this).dialog("close");
var strSelecteds = '';
var rows = $("#NoteTable tr");
for(var i=0; i< rows.length; i++)
{
var row = $(rows).eq(i);
var span = row.find('span#cboxSpan');
var cb = row.find('span#cboxSpan').find('input.cboxDELclass');
var checked=(cb.is(':checked'));
var pkno = cb.attr("pkno");
if (checked)
{
strSelecteds = strSelecteds + pkno + ',';
}
}//
if (strSelecteds.length>0)
{
strSelecteds = strSelecteds.substring(0,strSelecteds.length-1);
}
if (strSelecteds.length>0)
{
$.ajax({
type: "POST",
url: "/Note/DeleteALL",
data: { noteNOs: strSelecteds },
cache: false,
dataType: "json",
success: function (data)
{
var strSelectedsArr = strSelecteds.split(',');
for (var i = 0; i < strSelectedsArr.length; i++)
{
var rowNo = '#row-' + strSelectedsArr[i];
$(rowNo).remove();
//alert(strSelectedsArr[i]);
}//for
$('#saveDialog').dialog('close');
$('#Message').html(data.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300);
},
error: function(jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}
else
alert('No row selected');
}, // end of yes button
"No": function ()
{
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end deleteALL
//...
Como se ve arriba, la eliminación de muchos registros se realiza mediante una llamada ajax a la action "DeleteALL" en el controller "Note".
9) ¿Cómo usar Partial Action en MVC?
En algunos casos, se requiere un componente que debe usarse en muchos formularios. Por ejemplo, puede ser necesario un "cuadro de información de persona" en algunos formularios separados como se muestra a continuación.
La vista _personinfo puede ser como la siguiente.
HTML
@model AddressBook_mvc3_jQuery.Models.Person
@{ ViewBag.Title = "_personinfo"; }
<fieldset>
<legend>Person info</legend>
<table>
<tr><td><b><span> @Model.FirstName @Model.LastName </span></b>(@String.Format("{0:dd.MM.yyyy}",
Model.BirthDate))</td><td>(@Model.CategoryName)</td></tr>
</table>
</fieldset>
Para usar la partial action en cualquier vista, se puede usar la siguiente línea de código.
HTML
//..
<h2>Address List</h2>
<div>
@Html.Action("_personinfo", "Common")
</div>
//..
10) ¿Cómo usar el formato JSON en una aplicación MVC?
El formato JSON se puede usar al enviar parámetros a una action en el controller y al recibir resultados de una action. Como se muestra a continuación, la action DeleteNote en el controller Note tiene el parámetro noteNo. Aquí pkNo es un parámetro que se llama con valor.
JavaScript
$(".deleteLink").live("click", function (e)
{
e.preventDefault();
var pkNo = $(this).attr("pkNo");
//..
$.ajax({
type: "POST",
url: "/Note/DeleteNote",
data: { noteNo: pkNo },
cache: false,
dataType: "json",
success: function ()
{
$(rowNo).remove();
},
error: function(jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
//..
}); //end delete
Es posible obtener un resultado JSON de la action en el Controller. El siguiente script devuelve el resultado como objeto json.
C#
//..
[HttpPost]
public JsonResult DeleteNote(int noteNo)
{
string message = string.Empty;
try
{
Note n = Data.Repository.GetNoteList().Where(c => c.NoteNo == noteNo).FirstOrDefault();
if (n != null)
{
Data.Repository.GetNoteList().Remove(n);
message = "Deleted";
}
else
{
message = "Note not found!";
}
}
catch (Exception ex)
{
message = ex.Message;
}
return Json(new { Message = message }, JsonRequestBehavior.AllowGet);
}
//..
11) ¿Cómo llenar comboboxes maestro-detalle?
Algunos formularios requieren llenar un combobox cuando otro cambia. Por ejemplo, para un par país-ciudad, el país puede considerarse como maestro y la ciudad como detalle.
El html en la vista del "formulario de guardar" es el siguiente.
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text" name="TBPersonNo"
id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text" name="TBAddressNo"
id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
En la primera carga, el combobox idCBCountry se llena utilizando la action "GetCountryList" en el controller Address. Después, cuando el combobox de país cambia, el combobox de ciudad se llena de la siguiente manera.
JavaScript
<script type="text/javascript">
$(document).ready(function () {
//...
//-----------------------------------------------------
$.ajax({
type: "POST",
url: "@Url.Action("GetCountryList", "Address")",
data: {},
cache: false,
dataType: "json",
success: function (data)
{
var idCBcountry = $("#idCBcountry");
idCBcountry.html("");
if (@Model.AddressNo>0)
{
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (item.CountryNo == @Model.CountryNo)
{
idCBcountry.append($("<option selected></option>").val(item.CountryNo).text(item.CountryName));
fillCity(item.CountryNo);
}
else
{
idCBcountry.append($("<option />").val(item.CountryNo).text(item.CountryName));
}
} //for
}
else
{
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (i==0)
{
idCBcountry.append($("<option selected></option>").val(item.CountryNo).text(item.CountryName));
fillCity(item.CountryNo);
}
else
{
idCBcountry.append($("<option />").val(item.CountryNo).text(item.CountryName));
}
} //for
}//else
},
error: function(exp)
{
alert('ErrorCountry : ' + exp.responseText);
}
});
//-----------------------------------------------------
$("#idCBcountry").change(function () {
var $this = $(this);
var CountryNo = $this.val();
if (CountryNo)
{
fillCity(CountryNo);
}//if
});
//-----------------------------------------------------
});//end of function
function fillCity(parCountryNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCityList", "Address")",
data: {CountryNo: parCountryNo},
cache: false,
dataType: "json",
success: function (data)
{
var idCBcity = $("#idCBcity");
idCBcity.html("");
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (item.CityNo == @Model.CityNo)
{
idCBcity.append($("<option selected></option>").val(item.CityNo).text(item.CityName));
}
else
{
idCBcity.append($("<option />").val(item.CityNo).text(item.CityName));
}
}
},
error: function(exp)
{
alert('ErrorCity : ' + exp.responseText);
}
});
}//fillCity
</script>
Los códigos de las actions son los siguientes. Las listas se incrustan en el objeto json. Después, en el script jQuery mostrado arriba, los elementos de la lista se utilizan por índice.
C#
public class AddressController : Controller
{
//..
public JsonResult GetCountryList()
{
object obj = null;
List<Country> list = Repository.GetCountryList();
obj = new { Success = true, Message = "OK", List = list };
return Json(obj, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCityList(int CountryNo)
{
object obj = null;
List<City> list = Repository.GetCityList().Where(c => c.CountryNo == CountryNo).ToList(); ;
obj = new { Success = true, Message = "OK", List = list };
return Json(obj, JsonRequestBehavior.AllowGet);
}
//..
}
Esta técnica se puede utilizar para cualquier elemento html en el formulario de la vista.
12) ¿Cómo usar jQuery datepicker?
El tipo de fecha se utiliza en casi todas las aplicaciones empresariales. Debido a las diferencias de culturas, a veces usar este tipo significa un problema para el desarrollador. Sin embargo, jQuery datepicker facilita el uso del tipo de fecha.
Para mostrar la fecha en el formato deseado en la lista, se puede usar la siguiente línea.
HTML
<span class="BirthDate"> @String.Format("{0:dd.MM.yyyy}", item.BirthDate) </span>
En el formulario de guardar, se utiliza el siguiente script html.
HTML
...
<div class="editor-label">
@Html.LabelFor(model => model.BirthDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.BirthDate,
new { @class = "BirthDateSave",
@id = "TBBirthDate",
@Value = Model.BirthDate.ToString("dd.MM.yyyy")
})
</div>
...
jQuery Datepicker puede funcionar con @Html.TextboxFor con el siguiente script en la misma página.
JavaScript
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".BirthDateSave").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd.mm.yy',
showOn: 'both'
});
});
</script>
Las siguientes líneas deben incluirse al principio del .cshtml apropiado.
HTML
..
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
..
13) ¿Cómo cargar una imagen en MVC con jQuery dialog?
Una imagen se puede cargar fácilmente en una vista separada. Sin embargo, redirigir a una vista separada solo para cargar una imagen y luego redirigir a la vista de lista puede ser ineficiente en términos de costo. En su lugar, en la vista de lista, al hacer clic en el enlace de carga en cada fila, se puede abrir un jQuery dialog, se puede buscar y cargar una imagen.
Cuando se hace clic en "Upload Pic", se ejecuta el siguiente script.
JavaScript
//..
$(".uploadPicLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#savePicDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#savePersonPicForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//..
El formulario SavePersonPic que se carga en el jQuery dialog es el siguiente. Se utiliza iframe para cargar archivos en el jQuery dialog.
HTML
@model AddressBook_mvc3_jQuery.Models.Person
@{ViewBag.Title = "Save image";}
@using (Html.BeginForm("SavePersonPic", "Person", FormMethod.Post,
new
{
enctype = "multipart/form-data",
id = "savePersonPicForm",
name = "savePersonPicForm",
target = "UploadTarget"
}))
{
@Html.ValidationSummary(true)
<div id="update-message" class="error invisible"></div>
<fieldset>
<legend>Person Picture</legend>
<div class="editor-label">
<label for="file">Upload Image:</label>
</div>
<div class="editor-field">
<input type="file" name="file" id="file"/>
</div>
</fieldset>
}
<iframe id="UploadTarget"
name="UploadTarget" onload="UploadImage_Complete();"
style="position: absolute; left: -999em; top: -999em;">
</iframe>
La action de carga de archivo en el Controller es la siguiente:
C#
public class PersonController : Controller
{
//..
//-------------- image -----
[HttpGet]
public ActionResult SavePersonPic(int personNo)
{
Person person = new Person();
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
[HttpPost]
public JsonResult SavePersonPic(HttpPostedFileBase file, int personNo)
{
string message = string.Empty;
bool success = false;
string imgPath = "";
string fileName = "";
try
{
string path = System.IO.Path.Combine(Server.MapPath("~/Content/images"),
System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
Person p = Data.Repository.GetPersonList().Where(r => r.PersonNo == personNo).FirstOrDefault();
p.imgFileName = file.FileName;
ViewBag.Message = "File uploaded successfully";
message = ViewBag.Message;
fileName = file.FileName;
imgPath = Url.Content(String.Format("~/Content/images/{0}", fileName));
success = true;
}
catch (Exception ex)
{
message = ex.Message;
success = true;
imgPath = "";
fileName = "";
}
return Json(
new { Success = success,
Message = message,
PersonNo=personNo,
ImagePath = imgPath,
FileName = fileName
},
JsonRequestBehavior.AllowGet
);
}
//------------- /image --------
// ..
}
La función JavaScript "onload" del iframe es la siguiente. La imagen cargada se muestra en la fila correspondiente de la lista sin refrescar la fila.
JavaScript
//..
function UploadImage_Complete()
{
//Check first load of the iFrame
if (isFirstLoad == true)
{
isFirstLoad = false;
return;
}
try
{
//Reset the image form
document.getElementById("savePersonPicForm").reset();
var jsonTxt = ($('#UploadTarget').contents()).text();
var jsonObj = JSON.parse(jsonTxt);
var rowid = '#row-' + jsonObj.PersonNo;
var row = $('#personTable ' + rowid);
var imgid = "#img-" + jsonObj.PersonNo;
var img = row.find(imgid);
$(img).attr("src", jsonObj.ImagePath);
$('#Message').html(jsonObj.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300)
$('#savePicDialog').dialog('close');
}
catch (err)
{
alert(err.get_Message());
}
}
//..
14) ¿Cómo crear una fila de tabla en el lado del cliente?
Un registro añadido a la base de datos debe mostrarse en la lista del lado del cliente. Esto se puede hacer de muchas maneras. Después de añadir un registro, la lista se puede refrescar completamente desde la base de datos, pero esto sería una operación pesada. Sin embargo, utilizando javascript o jquery, se puede añadir una nueva fila a la vista sin refrescar todos los elementos de la vista. Aquí se mencionan dos formas.
Primero, a continuación se crean la fila y las celdas de la fila una por una con javascript. Como se ve en los scripts siguientes, la función JavaScript saveSuccess se utiliza para tal escenario después del submit de este formulario.
HTML
..
@model AddressBook_mvc3_jQuery.Models.Person
@{ ViewBag.Title = "Save Person"; }
..
@using (Ajax.BeginForm("Save", "Person", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "savePersonForm" }))
{
@Html.ValidationSummary(true)
..
}
..
El método javascript saveSuccess es el siguiente. La action devuelve un resultado json que contiene el tipo de operación. Según la operación, es decir, INSERT o UPDATE, la tabla en la vista se modifica. Cuando se añade un nuevo registro a la base de datos, se añade (prepend) una nueva fila a la tabla. Cuando se actualiza un registro existente en la base de datos, solo se cambia la fila correspondiente en la tabla.
JavaScript
function saveSuccess(data)
{
if (data.Success == true)
{
if (data.operationType == 'UPDATE')
{
//we update the table's row info
var parent = linkObj.closest("tr");
$(parent).animate({ opacity: 0.3 }, 200, function ()
{;});
parent.find(".FirstName").html(data.Object.FirstName);
parent.find(".LastName").html(data.Object.LastName);
parent.find(".CategoryName").html(data.Object.CategoryName);
var date = new Date(parseInt(data.Object.BirthDate.substr(6)));
var dateStr = FormatDate(date);
parent.find(".BirthDate").html(dateStr);
$(parent).animate({ opacity: 1.0 }, 200, function () {
;
});
}
else
{ //INSERT
//we add the new row to table
//we do not refresh all records on screen
try
{
var personTable = document.getElementById("personTable");
var row = personTable.insertRow(1); //row 0 is header
row.setAttribute("id", 'row-' + data.Object.PersonNo.toString());
var buttonsLinks =
'<a role="button" class="editLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover ui-state-focus" href="/Person/Save/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Edit</span></a> ' +
'<a role="button" class="adressLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Address/Index/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Addresses</span></a> ' +
'<a role="button" class="noteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Note/Index/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Notes</span></a> ' +
'<a role="button" class="deleteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Person/Delete/' + data.Object.PersonNo.toString() + '" pkno="' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Delete</span></a>';
var cellButtons = row.insertCell(0);
cellButtons.innerHTML = buttonsLinks;
var cellPersonNo = row.insertCell(1);
cellPersonNo.innerHTML = "<span class=\"PersonNo\">" + data.Object.PersonNo + "</span>";
var cellCategoryName = row.insertCell(2);
cellCategoryName.innerHTML = "<span class=\"CategoryName\">" + data.Object.CategoryName + "</span>";
var cellFN = row.insertCell(3);
cellFN.innerHTML = "<span class=\"FirstName\">" + data.Object.FirstName + "</span>";
var cellLN= row.insertCell(4);
cellLN.innerHTML = "<span class=\"LastName\">" + data.Object.LastName + "</span>";
var cellBirthDate = row.insertCell(5);
var date = new Date(parseInt(data.Object.BirthDate.substr(6)));
var dateStr = FormatDate(date);
cellBirthDate.innerHTML = "<span class=\"BirthDate\">" + dateStr + "</span>";
var cellimgFileName = row.insertCell(6);
cellimgFileName.innerHTML =
"<img id=\"img-" + data.Object.PersonNo.toString() + "\" alt=\"" + data.Object.ImgFileName + "\" src=\"/content/images/" + "noimg.jpg" + "\" height=\"35px\" width=\"50px\"><br><a class=\"uploadPicLink\" href=\"/Person/SavePersonPic/" + data.Object.PersonNo.toString() + "\" pkno=\"" + data.Object.PersonNo.toString() + "\" style=\"font-size:9px;\">Upload Pic</a>";
setLinks();
}
catch (err) {
alert(err.Message);
}
}
$('#saveDialog').dialog('close');
$('#Message').html(data.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300);
}
else {
$("#update-message").html(data.ErrorMessage);
$("#update-message").show();
}
}
La primera forma mencionada arriba puede parecer un enfoque antiguo. Por lo tanto, la siguiente segunda forma puede ser más aplicable. En esta forma, se utiliza html renderizado para añadir o actualizar una fila en la tabla. Suponga que tiene una tabla como la siguiente.
HTML
@model IEnumerable<AddressBook_mvc3_jQuery.Models.Address>
<table id="AddressTable">
<tr>
<th></th>
<th>
#
</th>
<th>
AddressType
</th>
<th>
City/Country
</th>
<th>
Address Text
</th>
</tr>
@foreach (var item in Model)
{
<tr id="row-@item.AddressNo">
<td>
@Html.ActionLink("Edit", "Save",
new { addressNo = item.AddressNo, personNo = item.PersonNo }, new { @class = "editLink" })
@Html.ActionLink("Delete", "DeleteAddress",
new { addressNo = item.AddressNo }, new { @class = "deleteLink", @pkNo = item.AddressNo })
</td>
<td>
<span class="AddressNo">@item.AddressNo</span>
</td>
<td>
<span class="AddressTypeName">@item.AddressTypeName</span>
</td>
<td>
<span class="CityName">@item.CityName/@item.CountryName</span>
</td>
<td>
<span class="AddressText">@item.AddressText</span>
</td>
</tr>
}
</table>
Cuando se hace clic en "new", el siguiente script se carga en el jQuery dialog.
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text"
name="TBPersonNo" id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text"
name="TBAddressNo" id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
Cuando se envía el formulario, se ejecuta la siguiente action en el controller.
C#
public class AddressController : Controller
{
//..
[HttpPost]
public JsonResult Save(FormCollection fc)
{
object obj = null;
Address addrTmp = new Address();
addrTmp.AddressNo = Convert.ToInt32(fc["TBAddressNo"].ToString());
addrTmp.AddressTypeNo = Convert.ToInt32(fc["CBAddressType"].ToString());
addrTmp.AddressText = fc["TBAddressText"].ToString();
addrTmp.CityNo = Convert.ToInt32(fc["CBcity"].ToString()); ;
addrTmp.PersonNo = Convert.ToInt32(fc["TBPersonNo"].ToString());
if (ModelState.IsValid)
{
if (addrTmp.AddressNo == 0)
{
//find last person
//if it is database system no need to this line. Probably the AddressNo would be autoincrement
addrTmp.AddressNo = Data.Repository.GetAddressList().OrderBy(x => x.AddressNo).Last().AddressNo + 1;
Data.Repository.GetAddressList().Add(addrTmp);
obj = new { Success = true,
Message = "Added successfully",
Object = addrTmp,
operationType = "INSERT",
Html = this.RenderPartialView("_addressLine", addrTmp )
};
}
else
{
Address addr = Repository.GetAddressList().Where(c => c.AddressNo == addrTmp.AddressNo).FirstOrDefault();
addr.AddressTypeNo = addrTmp.AddressTypeNo;
addr.AddressText = addrTmp.AddressText;
addr.CityNo = addrTmp.CityNo;
addr.PersonNo = addrTmp.PersonNo;
obj = new { Success = true,
Message = "Updated successfully",
Object = addr,
operationType = "UPDATE",
Html = this.RenderPartialView("_addressLine", addr )
};
}
}
else
{
obj = new { Success = false, Message = "Please check form" };
}
return Json(obj, JsonRequestBehavior.DenyGet);
}
// ..
}
Se utiliza el método RenderPartialView para obtener el script html deseado.
C#
//..
public static string RenderPartialView(this Controller controller, string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext,
viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
//..
La función saveSuccess del ajax post en el formulario saveAddress es la siguiente:
JavaScript
<script type="text/javascript">
//...
function saveSuccess(data)
{
if (data.Success == true)
{
$("#paginginfo").show();
if (data.operationType == 'UPDATE')
{
var row = linkObj.closest("tr");
// the following line can also be used to get related row
//$('#AddressTable #row-' + data.Object.AddressNo);
row.replaceWith(data.Html);
//..
}
else
{ //INSERT
try
{
$("#AddressTable tr:first").after(data.Html);
//..
}
catch (err)
{
alert(err.Message);
}
}
//..
}
else
{
//..
}
}
//..
</script>
Se puede utilizar cualquiera de las dos técnicas descritas anteriormente.
15) ¿Cómo personalizar mapRoute en Global.asax?
En la aplicación clásica asp.net, las operaciones de urlRewrite se realizaban fácilmente con algunos assemblies de terceros. En la aplicación MVC, es posible personalizar los mapRoutes utilizando Global.asax.
El siguiente mapRoute es el predeterminado en Global.asax:
C#
public class MvcApplication : System.Web.HttpApplication
{
//..
public static void RegisterRoutes(RouteCollection routes)
{
// all new customized maproute rules can be put here
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
// ..
}
Según el siguiente script,
**/Save/{addressNo}/{personNo}** se utiliza como enlace.HTML
@Html.ActionLink("Edit", "Save",
new { addressNo = item.AddressNo, personNo = item.PersonNo }, new { @class = "editLink" })
La captura de pantalla del enlace anterior es la siguiente.
Por lo tanto, es posible añadir una regla de mapRoute personalizada a Global.asax de la siguiente manera.
C#
//..
routes.MapRoute(
"AddressSave",
"Address/Save/{addressNo}/{personNo}",
new { controller = "Address", action = "Save",
addressNo = UrlParameter.Optional, personNo = UrlParameter.Optional }
);
//..
Se puede utilizar cualquiera de las dos técnicas descritas anteriormente.
16) ¿Cómo checkALL y uncheckALL de todas las filas de la tabla?
En muchas aplicaciones, se puede desear marcar o desmarcar todos los checks en una tabla a la vez.
Para este tipo de función, se puede utilizar el siguiente script.
HTML
..
<br />
| <a href="#" class="checkALLRecords" id="checkALL">Check ALL</a> | <a href="#" class="unCheckALLRecords" id="unCheckALL">Uncheck ALL</a> |
<br />
..
<table id="NoteTable"></table>
..
JavaScript
//..
//check ALL records
$("#checkALL").live("click", function (e)
{
e.preventDefault();
CheckALL(true);
});
//uncheck ALL records
$("#unCheckALL").live("click", function (e)
{
e.preventDefault();
CheckALL(false);
});
//..
function CheckALL(state)
{
var rows = $("#NoteTable tr");
for(var i=0; i< rows.length; i++)
{
var row = $(rows).eq(i);
var span = row.find('span#cboxSpan');
var cb = row.find('span#cboxSpan').find('input.cboxDELclass');
if (state==true)
cb.attr('checked',true);
else
cb.attr('checked',false);
}
}
//..
17) ¿Cómo hacer "Loading Data"?
Al cargar múltiples filas de datos, se debe mostrar el mensaje "loading data" a los usuarios.
El siguiente div se puede personalizar según el mensaje necesario.
HTML
..
<div id="loadMessage"></div>
..
Para personalizar el área del div, se puede utilizar la siguiente función javascript.
JavaScript
..
function showLoader(root, txt) {
$("#loadMessage").html("");
$("#loadMessage").show();
var loader = '<img src="' + root + '/ajax-loader.gif" align="absmiddle">&nbsp;<span><br/>' + txt + '...</span>';
$("#loadMessage").fadeIn(100).html(loader);
}
function hideLoader() {
$("#loadMessage").hide();
}
..
18) ¿Cómo hacer grids maestro-detalle con jQuery?
Cuando se hace clic en la fila maestra, las filas de detalle se muestran debajo del grid maestro como se muestra a continuación.
Se utilizan las siguientes tablas como grids.
HTML
..
<table id="CountryTable" class="hovertable2"></table>
<br />
<br />
<table id="CityTable" class="hovertable"></table>
..
Se utilizan las siguientes funciones javascript para simular el enfoque maestro-detalle.
JavaScript
..
function setTableRowClick()
{
$("#CountryTable tr td.clickable").unbind('click');
$('#CountryTable tr td.clickable').click(function ()
{
var row = $(this).parent();
setRow(row);
});
//-------------
}//func
function setRow(row)
{
var rowid = row.attr('id'); //current
var higlightedCountryTableRowid = $("#pageinfo .higlightedCountryTableRowid").text();
$("#pageinfo .higlightedCountryTableRowid").html(rowid.toString());
if ((rowid==0) || (rowid!=higlightedCountryTableRowid))
{
//------
row.siblings().removeClass('diffColor');
row.addClass("diffColor");
//-------
fillCityData(rowid);
}
}
..
function fillCountryData()
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCountryList", "Country")",
data: {},
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#CountryTable").html(data.Html);
buttonizeALL();
setLinkAbilitesCountry();
setLinkAbilitesCity();
setTableRowClick();
}
else
{
alert('opps-- country list error!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
}//func
function fillCityData(parCountryNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCityList", "Country")",
data: { countryNo: parCountryNo},
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#CityTable").html(data.Html);
buttonizeALL();
setLinkAbilitesCity();
setTableRowClick();
}
else
{
alert('opps-- city list error!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
}//func
..
Conclusión
Espero que haya sido un artículo útil.
Servicios de Computación en la Nube
Ofrecemos servicios de diseño de infraestructura, migración, gestión y optimización en plataformas AWS, Azure y Google Cloud.
Explorar Nuestro ServicioContáctenos
Póngase en contacto con nuestro equipo para obtener información detallada sobre nuestras soluciones de AWS y computación en la nube.
Contacto