Oct 23, 2012, 4:08 AM
[CLOSED] Loading a partial view in Table Format
How can load the partial view in the Table Column Format as described in the code and in the image
Search.cshtml
Thank you
Search.cshtml
@using Ext.Net.MVC
@model System.Collections.IEnumerable
@{
ViewBag.Title = "Search";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
.cbStates-list {
width : 350px;
font : 11px tahoma,arial,helvetica,sans-serif;
}
.cbStates-list th {
font-weight : bold;
}
.cbOperator-list {
width : 200px;
font : 11px tahoma,arial,helvetica,sans-serif;
}
.cbOperator-list th {
font-weight : bold;
}
</style>
<script>
var myCustomFn = function () {
//debugger;
var item = Ext.getCmp("srchPanel");
var where = "where ";
if (item != null) {
for (var i = 0; i < item.items.length; i++) {
for (var j = 0; j < item.items.items[i].items.length; j++) {
var itemControl = item.items.items[i].items.items[j];
if (item.items.length == 1) {
if (j < item.items.items[i].items.length - 1) {
if (j == 2) {
where += " " + createItem(item.items.items[i].items.items[j - 1].getDisplayValue(), itemControl.value, item.items.items[i].items.items[0].value) + " ";
}
else {
if (j == 0)
where += " " + itemControl.getDisplayValue() + " ";
else if (j == 1 && (itemControl.getDisplayValue() != "StartsWith" && itemControl.getDisplayValue() != "EndsWith")) {
where += " " + itemControl.getDisplayValue() + " ";
}
else if (j == 3) {
where += " " + itemControl.value + " ";
}
}
}
}
//this is the last row
else if (i == item.items.length - 1) {
if (j < item.items.items[i].items.length - 1) {
if (j == 2) {
where += " " + createItem(item.items.items[i].items.items[j - 1].getDisplayValue(), itemControl.value, item.items.items[i].items.items[0].value) + " ";
}
else {
if(j == 0)
where += " " + itemControl.getDisplayValue() + " ";
else if (j == 1 && (itemControl.getDisplayValue() != "StartsWith" && itemControl.getDisplayValue() != "EndsWith")) {
where += " " + itemControl.getDisplayValue() + " ";
}
else if(j == 3) {
where += " " + itemControl.value + " ";
}
}
}
}
else {
if (j == 2) {
where += " " + createItem(item.items.items[i].items.items[j - 1].getDisplayValue(), itemControl.value, item.items.items[i].items.items[0].value) + " ";
}
else {
if (j == 0)
where += " " + itemControl.getDisplayValue() + " ";
else if (j == 1 && (itemControl.getDisplayValue() != "StartsWith" && itemControl.getDisplayValue() != "EndsWith")) {
where += " " + itemControl.getDisplayValue() + " ";
}
else if (j == 3) {
where += " " + itemControl.value + " ";
}
}
}
}
}
//post this to the controller
Ext.Ajax.request({
url: 'BuildSearch',
method: 'POST',
params: {
where: where
},
success: function (response) {
var result = response.responseText;
Ext.Msg.show({
title: 'Save Changes?',
msg: result,
buttons: Ext.Msg.YESNOCANCEL,
animEl: 'elId'
});
}
});
}
};
//need to handle date and datetime, datetime2,datetimeoffset
function createItem(item, value, datatype) {
switch(item) {
case "=":
if (datatype == "bigint" || datatype == "float" || datatype == "decimal" || datatype == "int" || datatype == "double" || datatype == "bit" || datatype == "money") {
return item != value ? value : value;
}
else {
return item != value ? "'" + value + "'" : value;
}
case "<>":
if (datatype == "bigint" || datatype == "float" || datatype == "decimal" || datatype == "int" || datatype == "double" || datatype == "bit" || datatype == "money") {
return item != value ? value : "";
}
else {
return item != value ? "'" + value + "'" : value;
}
case "in":
if (datatype == "bigint" || datatype == "float" || datatype == "decimal" || datatype == "int" || datatype == "double" || datatype == "bit" || datatype == "money") {
return value;
}
else {
var itemSplit = value.split(",");
var newValue = "(";
for (var i = 0; i < itemSplit.length; i++) {
if (i == itemSplit.length - 1) {
newValue += "'" + itemSplit[i] + "')";
}else {
newValue += "'" + itemSplit[i] + "' , ";
}
}
return newValue;
}
case ">":
return item != value ? value : value;
case "<":
return item != value ? value : "";
case "StartsWith":
return item != value ? "like " + "'%" + value + "'" : value;
case "EndsWith":
return item != value ? "like " + "'" + value + "%'" : value;
}
}
</script>
<h2>Search</h2>
<table width="450px">
<tr style="width: 150px"> <td>@(Html.X().Button()
.ID("CreateNew")
.Text("Add")
.DirectEvents(de =>
{
de.Click.Url = Url.Action("SearchControl");
de.Click.EventMask.ShowMask = true;
de.Click.FormID = "FormPanel";
de.Click.ExtraParams.Add(new { containerId = "srchPanel" });
})
)</td><td>
@(Html.X().ComboBox()
.ID("cmbFields")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.EmptyText("Loading.....")
.Width(250)
.DisplayField("COLUMN_NAME")
.ValueField("COLUMNA_NAME")
//.Listeners(ls=> ls.Select.Handler = "App.")
.Store(Html.X().Store()
.AutoLoad(true)
.Model(Html.X().Model()
.IDProperty("id")
.Fields(
new ModelField("COLUMN_NAME", ModelFieldType.String) {Mapping = "COLUMN_NAME"})
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetPkAndFk"))
.Reader(Html.X().JsonReader().Root("data"))
)
)
)
</td>
<td>
@(Html.X().ComboBox()
.ID("cmbOperators")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.EmptyText("Loading.....")
.Width(250)
.DisplayField("OperatorId")
.ValueField("OperatorId")
//.Listeners(ls=> ls.Select.Handler = "App.")
.Store(Html.X().Store()
.AutoLoad(true)
.Model(Html.X().Model()
.IDProperty("id")
.Fields(
new ModelField("OperatorId", ModelFieldType.String) {Mapping = "OperatorId"})
)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetOperators"))
.Reader(Html.X().JsonReader().Root("data"))
)
)
)
</td>
<td>
@(Html.X().TextField()
.ID("srch")
.EmptyText("Search Criteria...")
.Width(250)
)
</td>
</tr>
@if (Model != null)
{
foreach (var item in Model)
{
<tr>
<td>
@Html.ActionLink("Edit", "Edit", new {/* id=item.PrimaryKey */}) |
@Html.ActionLink("Details", "Details", new {/* id=item.PrimaryKey */}) |
@Html.ActionLink("Delete", "Delete", new {/* id=item.PrimaryKey */})
</td>
</tr>
}
}
</table>
@(Html.X().Panel()
.ID("srchPanel")
.Title("Search Criteria")
//.Width(550)
.BodyPadding(5)
.BodyPadding(5)
.AutoDoLayout(true)
.Layout(LayoutType.Table)
)
@(Html.X().Button()
.ID("btnSearch")
.Text("Search")
.DirectEvents(de=>
{
de.Click.Url = Url.Action("SearchNow");
de.Click.EventMask.ShowMask = true;
de.Click.FormID = "FormPanel";
})
.Listeners(c => c.Click.Handler = "={myCustomFn}")
)<div style="height:100px;width:350%">
<table >
<tr>
<td>
@(Html.X().ComboBox()
.Width(350)
.ID(Guid.NewGuid().ToString())
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.EmptyText("Loading.....")
.Width(250)
//.DisplayField("COLUMN_NAME")
//.ValueField("COLUMNA_NAME")
)
</td>
<td>
@(Html.X().ComboBox()
.Width(350)
.ID(Guid.NewGuid().ToString())
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.EmptyText("Loading.....")
.Width(250)
//.DisplayField("COLUMN_NAME")
//.ValueField("COLUMNA_NAME")
)
</td>
<td>@(Html.X().TextField()
.Width(250)
.ID(Guid.NewGuid().ToString())
.SetFieldLabel("Enter Search Criteria")
)</td>
<td></td>
</tr>
</table>
</div>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI.WebControls;
using Ext.Net;
using Ext.Net.MVC;
using ExtMVC.Models;
using ListItem = Ext.Net.ListItem;
using ListItemCollection = Ext.Net.ListItemCollection;
using Panel = Ext.Net.Panel;
using PartialViewResult = Ext.Net.MVC.PartialViewResult;
namespace ExtMVC.Controllers
{
public class SearchController : Controller
{
public ActionResult Search()
{
return View();
}
public ActionResult GetPkAndFk()
{
//List<TableData> data = new List<TableData>
// {
// new TableData("ADDRESS", "string"),
// new TableData("USER_TYPE", "string"),
// new TableData("CITY", "string"),
// new TableData("USER_ID", "string"),
// new TableData("BASE_SAL", "double"),
// new TableData("FTE", "double"),
// new TableData("HIRED_DATE", "date")
// };
return this.Store(new SearchModel().GetAllColumnForTable("AC_USER"));
//return this.Store(data);
}
public List<GetAllColumnForTable_Result> BuildColumnDropList()
{
List<GetAllColumnForTable_Result> results = new SearchModel().GetAllColumnForTable("AC_USER");
//List<TableData> data = new List<TableData>
// {
// new TableData("ADDRESS", "string"),
// new TableData("USER_TYPE", "string"),
// new TableData("CITY", "string"),
// new TableData("USER_ID", "string"),
// new TableData("BASE_SAL", "double"),
// new TableData("FTE", "double"),
// new TableData("HIRED_DATE", "date")
// };
// return data;
return results;
}
public ActionResult GetOperators()
{
var operators = BuildOperators();
return this.Store( operators);
}
public List<Operators> BuildOperators()
{
return new List<Operators>
{
new Operators("Equals", "="),
new Operators("Not Equals", "<>"),
new Operators("Contains","in"),
new Operators("Greater Than",">"),
new Operators("Less Than","<"),
new Operators("Starts With", "StartsWith"),
new Operators("Ends With", "EndsWith")
};
}
public ComboBox GetAndOrOr()
{
var opr = new List<Operators>
{
new Operators("AND", "AND"),
new Operators("OR", "OR"),
};
var cb = new ComboBox();
foreach (var result in opr)
{
var item = new ListItem { Text = result.OperatorId, Value = result.OperatorValue };
cb.Items.Add(item);
}
return cb;
}
public ComboBox BuildComboBoxOperators()
{
List<Operators> results = BuildOperators();
var cb = new ComboBox();
foreach (var result in results)
{
var item = new ListItem {Text = result.OperatorId, Value = result.OperatorValue};
cb.Items.Add(item);
}
return cb;
}
public ActionResult CreateTable(string containerId)
//public PartialViewResult CreateTable(string containerId)
{
#region DataBase Field
var cbBox = new ComboBox { DisplayField = "COLUMN_NAME", ValueField = "DATA_TYPE", Width = 350, PageSize = 10, TypeAhead = true};
var blList = new BoundList() { Width = 350, Height = 200, ItemSelector = ".x-boundlist-item" };
var cbStore = new Store
{
Data = BuildColumnDropList(),
AutoDataBind = true,
IsPagingStore = true,
AutoLoad = true,
PageSize=10 ,
RemotePaging=false
};
cbBox.ListConfig = blList;
var model = new Model();
model.Fields.Add(new ModelField("COLUMN_NAME"));
model.Fields.Add(new ModelField("DATA_TYPE"));
cbStore.Model.Add(model);
cbStore.AutoLoad = true;
var tplFields = @" <Html>
<tpl for=""."">
<tpl if=""[xindex] == 1"">
<table class=""cbStates-list"">
<tr>
<th>COLUMN_NAME</th>
<th>DATA_TYPE</th>
</tr>
</tpl>
<tr class=""x-boundlist-item"">
<td>{COLUMN_NAME}</td>
<td>{DATA_TYPE}</td>
</tr>
<tpl if=""[xcount-xindex]==0"">
</table>
</tpl>
</tpl>
</Html>";
var tplFieldsTemplate = new XTemplate
{
ID = "tplFieldsTemplate",
Html = tplFields
};
cbBox.ValueField = "DATA_TYPE";
cbBox.DisplayField = "COLUMN_NAME";
cbBox.AutoDataBind = true;
cbBox.ForceSelection = true;
cbBox.Tpl = tplFieldsTemplate;
cbBox.Editable = false;
cbBox.ForceSelection = true;
tplFieldsTemplate.DataBind();
cbBox.Store.Add(cbStore);
#endregion
#region Operator
var cbOperator = new ComboBox() { DisplayField = "OperatorId", ValueField = "OperatorValue", Width = 205, PageSize = 10, TypeAhead = true };
var operatorStore = new Store()
{
Data = BuildOperators(),
AutoDataBind = true,
PageSize = 10,
IsPagingStore = true
};
var operatorModel = new Model();
operatorModel.Fields.Add(new ModelField("OperatorId"));
operatorModel.Fields.Add(new ModelField("OperatorValue"));
operatorStore.Model.Add(operatorModel);
operatorStore.AutoLoad = true;
var tplOperator = @"<Html>
<tpl for=""."">
<tpl if=""[xindex] == 1"">
<table class=""cbOperator-list"">
<tr>
<th>Operator Id</th>
<th>Type</th>
</tr>
</tpl>
<tr class=""x-boundlist-item"">
<td>{OperatorId}</td>
<td>{OperatorValue}</td>
</tr>
<tpl if=""[xcount-xindex]==0"">
</table>
</tpl>
</tpl>
</Html>";
var tplOperatorTemplate = new XTemplate
{
ID = "tplTemplate",
Html = tplOperator
};
cbOperator.ValueField = "OperatorId";
cbOperator.DisplayField = "OperatorValue";
cbOperator.AutoDataBind = true;
cbOperator.ForceSelection = true;
cbOperator.Editable = false;
cbOperator.Tpl = tplOperatorTemplate;
tplOperatorTemplate.DataBind();
cbOperator.Store.Add(operatorStore);
#endregion
#region AndOrSelection
var cbAndOr = GetAndOrOr();
cbAndOr.DisplayField = "OperatorId";
cbAndOr.ValueField = "OperatorValue";
cbAndOr.Editable = false;
#endregion
#region Table Panel
var pnlTableLayout = new Panel();
pnlTableLayout.Region = Region.East;
pnlTableLayout.BodyStyle = "padding:5px;";
pnlTableLayout.Border = false;
pnlTableLayout.Layout = LayoutType.Table.ToString();
var tlc = new TableLayoutConfig()
{
Columns = 4
};
pnlTableLayout.LayoutConfig.Add(tlc);
pnlTableLayout.Items.Add(cbBox);
pnlTableLayout.Items.Add(cbOperator);
pnlTableLayout.Items.Add(new TextField());
pnlTableLayout.Items.Add(cbAndOr);
pnlTableLayout.Render("srchPanel", RenderMode.AddTo);
#endregion
return this.Direct();
//return new PartialViewResult(containerId);
}
public PartialViewResult SearchControl(string containerId)
{
return new PartialViewResult
{
RenderMode = RenderMode.AddTo,
ContainerId = containerId,
WrapByScriptTag = false
};
}
public string BuildSearch(string where)
{
return where;
}
public ActionResult SearchNow()
{
var pnlItem = this.GetCmp<Panel>("srchPanel");
if(pnlItem.HasControls())
{
}
foreach(var item in pnlItem.Items)
{
//no items in the panel
}
return this.Direct();
}
//
// GET: /Search/Details/5
public ActionResult Details(int id)
{
return View();
}
//
// GET: /Search/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Search/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Search/Edit/5
public ActionResult Edit(int id)
{
return View();
}
//
// POST: /Search/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Search/Delete/5
public ActionResult Delete(int id)
{
return View();
}
//
// POST: /Search/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}Thank you
Last edited by Daniil; Oct 26, 2012 at 5:51 PM.
Reason: [CLOSED]
