I am trying to do a drill down report. I am using MVC and Devexpress Gridviews. I render my view and the partial view and display my gridview with the result.
Now what I need to accomplished is when I double click on the gridview I need to render a new/different partial view in the place off the existing gridview - The one I double clicked on.
Is this possible?
Here is what I have:
public ActionResult MainPartial()
{
using (var Context = new DataContext())
{
ViewBag.Level = 0;
return PartialView("MainPartial",SomeData);
}
}
public ActionResult FirstDrilldownPartial(int Param)
{
using (var Context = new DataContext())
{
ViewBag.Level = 1;
return PartialView("FirstDrilldownPartial",SomeNewData(Param));
}
}
My Gridview RowDblClick event
function onDoubleClick(s, e) {
$.ajax({
type: 'POST',
url: '/Controler/FirstDrilldownPartial',
dataType: 'json',
async: false,
//cache: false,
data: {
Param: 1
}
});
}
At the moment everything is working but when I call the function "function onDoubleClick(s, e)" the Main grid stay on the view and the new grid is not rendered.
Can someone please help with suggestions.
Thanks
You can render both partials in different divs and hide or show in your js function a div, for example
<div id="mydiv1">
#Html.Partial("Partial1")
<div>
<div id="mydiv2">
#Html.Partial("Partial2")
</div>
and in your onDoubleClick ( I assume that you are using jQuery)
$("#mydiv1").hide();
$("#mydiv2").show();
and to hide (on page load) the second div first just add
$(function () {
$("#mydiv2").hide();
});
or use
<div id="mydiv2" style="display:none;">
This code is not tested, but it should work.
Related
Hi i got issue in opening pop-up window multiple times while clicking button. I will explain my issue clearly.
Hi, this is my parent view Customer Form.I have one add button near to Area if i enter the CustomerName AddressType, Street, Location,Place and then select the area.Suppose if area is not in the list means i have to add that. so i click that add button it will open AreaPartial view as popup window.
After i enter the details and click the create button it will save the data in db and it shows the same popup window when it was close means when i click x mark[which is in the pop up window right top corner ) . Now all are working fine.
Now my issue is i open the pop-up window by clicking the button and add the area and close the pop-up window before clicking the main save button in parent view i have to add another one area so i click the add button again but it wont opening the pop-up window . This is my issue.
My Controller code to save the data which is entered in the partial view pop-up window
public ActionResult AreaPartialView()
{
ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
return View("AreaPartialView");
}
[HttpPost]
public ActionResult AddAreaInfo(CustomerViewModel objareaVM)
{
var objAreaID = Guid.NewGuid();
ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID);
var ObjArea = new Area()
{
AreaID =objAreaID,
DisplayName = objareaVM.Area,
PrintName = objareaVM.Area,
CityID = objareaVM.CityID,
IsActive = true,
IsDeleted = false,
CreatedDate = DateTime.Now,
EditedDate = DateTime.Now,
LastActiveOn = DateTime.Now,
RowID = Guid.NewGuid(),
CreatedSessionID = Guid.NewGuid(),
EditedSessionID = Guid.NewGuid(),
OfflineMode = false,
OfflineID = Guid.NewGuid()
};
db.Areas.Add(ObjArea);
db.SaveChanges();
ModelState.Clear();
return Json(objAreaID);
}
My j-query code to display the area partial view as popup window once the add button is clicked in Parent View
<script src="~/Scripts/jquery-1.10.2-ui.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$("#AddArea").click(function () {
$('#AddAreaNew').dialog("open");
});
$(function () {
$('#AddAreaNew').dialog({
autoOpen: false,
width: 400,
height: 500,
resizable: false,
title: 'Add Area',
modal: true,
open: function (event, ui) {
$(this).load("#Url.Action("AreaPartialView", "Customer")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
My Partial View code
#Html.Label("Area" , new { #class = "control-label" })
#Html.TextBoxFor(model => model.Area, new { #class = "form-control", type = "text" ,id ="AreaName"})
#Html.ValidationMessageFor(model => model.Area)
#Html.Label("City")
#Html.DropDownList("CityID", null, "Select", new { #class = "form-control " })
<script src="~/Scripts/jquery-1.10.4-ui.min.js"></script>
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript">
function SaveArea() {
debugger;
var Area = $("#AreaName").val();
var CityID = $("#CityID").val();
alert(Area);
var AreaAdd = { "Area": '' +Area + '', "CityID": CityID };
$.post("/Customer/AddAreaInfo", AreaAdd, function(data) {
var option = new Option(Area, data);
$('#AreaID').append($(option));
alert("sucess");
window.close();
});
}
This is my issue i cant able to open my pop-up window multiple times.i tried my level best to explain my issue. please any one help me to solve this issue.
Advance thanks..
Perhaps something like this would help you, as a brief example.
<style>
.floatingbox
{
z-index:99999;
position:absolute;
/* and more of your styling here, the main point is to make to appear above any other element on the page */
}
</style>
<div class="floatingbox" id="inputbox">
</div>
EDIT: <input type="button" value="Add Field" onclick="WhenIGetClicked(this)"/>
function WhenIGetClicked(e)
{
RefershContent();
document.getElementbyId('input').style.left = e.style.left;
document.getElementbyId('input').style.top = e.style.top; // show div at position of button but you can change it to where-ever
}
function RefreshContent()
{
// put your html in here for the different fields you'll need in the div
document.getElementbyId('inputbox').innerHTML = '';
// add the rest of your html mark up but make it as a function so it can be 'refreshed' and look like a new blank form each time, i found this easier than making a partial view and having to deal with loading it into the div/messing with javascript inside the partial view but may be personal preference :)
}
function OnSaveClick()
{
var SomeValueYouWantToPass = document.getElementbyId('inputboxinsidethediv').value; // or innerHTML works sometimes too if it's not getting the value correctly
$.ajax({
type:post,
url: '/MyController/ActionName',
dataType: 'json',
data: { MyVariableOnTheControllerSide: SomeValueYouWantToPass },
success: function()
{
alert('hey it worked!'); // or refresh the page to load the new field, etc
}
)}
}
</script>
On the controller side now:
public JsonResult UpdateField(string MyVariableOnTheControllerSide)
{
//do something with the data.
return Json('Hey it worked!', JsonRequestBehavior.AllowGet);
}
If you'd like to pass it as a class since that's how you have it set up on your controller, you'll have to create the class as a Json object on the HTML markup side of it when grabbing the values (heck you could even do a for loop of the controls in the div and dynamically grab the values instead of reaching out to each element to get it's value). Very basic run down of how I usually do pop ups. Let me know if you need clarification or if I missed your point :)
I have a script file scripts.js with a function that styles all checkboxes in page. This file is referenced in the master page.
There is a user control and a aspx test page for it. On page load, the UC shows a list of checkboxes and the style is applied.
On clicking a button, an ajax call gets a list from database and binds some more checkboxes to the page. But for the new checkboxes, the style is not applied. What could be going wrong.
scripts.js:
function selectcheckBtn() {
alert(1);
if ($("input:checkbox").prev("span").length === 0) {
alert(2);
$("<span class='uncheked'></span>").insertBefore("input:checkbox")
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
}
ctrl.ascx:
<script>
function ShowMore() {
$.ajax({
url: "/_layouts/15/handlers/ShowMore.ashx",
data: {},
success: function (msg) {
//append new chkbox list to existing list. It is hidden at first and later faded in.
$(".divList").append(msg);
selectcheckBtn();
$(".hideDiv").fadeIn(300).removeClass("hideDiv");
},
error: function (msg) {
alert("An error occurred while processing your request");
}
});
}
</script>
Show more
On page load both alerts pop. But on clicking 'Show More', only alert(1) pops.
There are no errors in browser console.
Rendered HTML:
//with style applied to chkboxes on page load
<div><span class="uncheked"></span><input type="checkbox" runat="server" id="406">
<label>Compare</label></div>
//with no style applied to new chkboxes
<div><input type="checkbox" runat="server" id="618"><label>Compare</label></div>
I did not understand why the if condition wasn't true in selectcheckBtn();, for the new chkboxes. So, added a new class for the checkboxes and wrote this workaround.
Now calling this function instead of selectcheckBtn(); in the ajax code, worked.
function StyleCheckBox() {
$(".chkBx").each(function () {
if ($(this).prev("span").length === 0) {
$("<span class='uncheked'></span>").insertBefore($(this));
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
});
}
This is a problem I haven't come across before.
I'm working on an MVC4 project. I'm using an asp button control because there isn't a Html Helper that can be used for a button (re: There's no #Html.Button !). My button code is:
<td><asp:Button ID="ButtonUndo" runat="server" Text="Undo"
OnClick="ButtonUndo_Click" AutoPostBack="true"/></td>
I went to the Designer tab and clicked on this button which produced the event handler:
protected void ButtonUndo_Click(object sender, EventArgs e)
{
RRSPSqlEntities db = new RRSPSqlEntities();
int id = (int)ViewData["ClientId"];
var updateAddress = (from a in db.Address
where a.PersonId == id
select a).SingleOrDefault();
updateAddress.Deleted = false;
db.SaveChanges();
}
I should add that this code was added to the same .aspx page wrapped in a script tag. Also within this section is the Page_Load method. The eventhandler is not within Page_Load.
The problem was found when I set a breakpoint and stepped through the code. Clicking my button shows that it doesn't hit my event handler at all. I don't know why this is, particularly as ASP created the event from clicking the button in Design mode.
Clicking my button shows that it doesn't hit my event handler at all.
This isn't all that surprising. ASP.NET MVC uses a completely different event model (i.e. it doesn't have one like web forms). However, what you're trying to do is very straight forward. In your controller build a new method, let's call it Undo:
public ActionResult Undo(int id)
{
RRSPSqlEntities db = new RRSPSqlEntities();
var updateAddress = (from a in db.Address
where a.PersonId == id
select a).SingleOrDefault();
updateAddress.Deleted = false;
db.SaveChanges();
return View("{insert the original action name here}");
}
and then in your markup, simply markup the input like this:
<form method="POST" action="/ControllerName/Undo">
#Html.HiddenFor(Model.Id)
<input type="submit" value="Undo" />
</form>
where the Model for the View you're on contains a property, I've called it Id, that is the id you want passed into Undo.
I usually prefer to make ajax calls. You can try:
<button type="button" class="button" onclick="ButtonUndo();" />
In the form:
<script>
function ButtonUndo() {
$.ajax({
type: 'POST',
url: '/controller/action',
data: 'PersonID=' + ID,
dataType: 'json',
cache: false,
success: function (result) {
//do stuff here
},
error: function () {
//do error stuff here
}
});
}
</script>
Controller:
[HttpPost]
public ActionResult Action(int PersonID)
{
//Do your stuff here
return new JsonResult { result = "something" };
}
(Sorry for any typos or syntax errors...I pulled from existing code that we use in a project.)
Let's say I have a view with Kendo treeview bounded to remote data source.
#(Html.Kendo().TreeView()
.Name("schemas")
.DataTextField("name")
.DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
.Events(events => events
.Select("onSelected")))
So the treeview just makes a call to the Schemas action in my FormsController
Also on the same page I have a form, which is simply the textbox and a button to submit the form
#using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
}
So I am just wondering what is the best way to handle user input and pass it to the the Load action of the FormsController? The user should select one of the options in the treeview and enter the value into textbox.
Or should I create some sort of viewmodel for my view with all my nodes inside + two additional fields for the textbox input and selected node?
I would take out the form elements, leaving:
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
The following js, this will pick up the tree item id on select.
The second function will call your Form controller action with the parameters.
<script>
var selectedNodeid;
//get the tree selected item id
function onSelected(e) {
var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
selectedNodeid = data.id;
}
//button on click event
$(document).ready(function () {
$("#next")
.bind("click", function () {
//get parameters then pa
var id = selectedNodeid;
var rootElementName = $('#rootElementName).val()
$.ajax({
url: "Form/Load",
data:{id:id,rootElementName:rootElementName},
success: function () { }
});
}
})
</script>
I haven't tested this but it should be close.
I look forward to someone adding a better approach.
I'm trying to prevent the scrolling to the top when using jQuery's .load function. I've read at SO that you can use event.preventDefault(); event.stopPropagation();. Here is the link to this question. But when using beginform, you don't have an event here.
I also tried to put a click event on the submit button, but this also didn't work.
Thanks in advance!
This is the code of the view. When success the function closeFancyReservationCancel is called.
#using (
Ajax.BeginForm("Cancel",
"Reservation",
new AjaxOptions { HttpMethod = "POST",
OnSuccess = "closeFancyReservationCancel"},
new { id = "cancelForm" }))
{
...
}
)
And this is the jQuery function
function closeFancyReservationCancel() {
$.fancybox.close();
$('#reservationList').load(ResolveUrl('~/Reservation/reservationList'));
}
function ResolveUrl(url) {
if (url.indexOf("~/") == 0) {
url = baseUrl + url.substring(2);
}
return url;
}
Here a part of my HTML:
<div id="reservationList" class="tblContainer">
#Html.Action("reservationList", "Reservation")
</div>
The action reservationList returns a view with the table. Only the body of the table has an overflow: auto;.
EDIT: added more information
I have a div with a list of my reservations table. I am using MVC3 to show that list. When press the cancel button, the div will reload by the .load function.
EDIT
Here my HTML view with the table:
Pastebin
You can simply get the Scroll amount before loading. And apply the same scroll amount after load is finished
function closeFancyReservationCancel() {
$.fancybox.close();
var scroll_amount= $('#reservationList').scrollTop();
$('#reservationList').load(ResolveUrl('~/Reservation/reservationList'),
function() {
$('#reservationList').scrollTop(scroll_amount);
});
}
If you want you can also use .scrollLeft() amount.