On my main page, I have a textbox with a button called "Set" next to it. When a user clicks on the set button, it opens up a new page like a popup which have list of items with select button users can select.
When a user clicks on a select button, I wanted to sync the corresponding information into the my main page's text box.
Do anyone know how this could be done?
Index HTML Code:
<input type="button" id="Set" name="Set..." value="Set..." class="btn btn-default" />
Index Jquery Code:
$("#Set").click(function () {
window.open('#Url.Action("FileTypeDefinitionSelector", "FileTypeDetails")', '', 'height=500,width=600,left=-150,top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');
});
List html code:
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Summary)
</td>
<td>
#Html.ActionLink("Select", "Index", new { name=item.Name.Replace(" ", "") })
</td>
</tr>
}
Related
I have this list view that include edit button leads to modal
<table class="table" id="table">
#foreach (var item in Model.model2)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.who_reply)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.Details)
</td>
<td>
#Html.DisplayFor(modelItem => item.Reply_Id)
</td>
<td>
<input class="edit" id="edit" type="button" value="edit" data-reply="#item.Details" data-Reply_Id="#item.Reply_Id" />
</td>
</tr>
}
</table>
I wrote this jquery code to check Reply_Id value it works fine it gives me the current Reply_Id
$('.edit').click(function () {
alert($(this).data('Reply_Id'));
$('#ModalPopUp6').modal({ backdrop: 'static', keyboard: false });
$("#reply-text6").val($(this).data('reply'));
});
but the problem is that when I press save button in modal only get the first reply_id not the current:
$("#save").click(function () {
alert($('.edit').data('Reply_Id'));
});
Your issue is caused by
$(".class").data(dataname)
which retrieves the first entry, you need to "store" which edit button (reply_id) was clicked - either in a simple variable or in a more robust method such as:
$('.edit').click(function () {
// get the edit button's ID
var id = $(this).data('Reply_Id');
// store it against the modal
$('#ModalPopUp6').data("replyid", id);
$('#ModalPopUp6').modal({ backdrop: 'static', keyboard: false });
$("#reply-text6").val($(this).data('reply'));
});
then
$("#save").click(function () {
// get the original row's ID from the modal
var id = $('#ModalPopUp6').data("replyid");
// find the matching button (then get the parent row for the whole record)
var row = $("[data-Reply_id=" + id + "]").closest("tr");
});
This question already has answers here:
Post an HTML Table to ADO.NET DataTable
(2 answers)
Closed 4 years ago.
It seems like a lot of people have this issue, but I haven't found a solution to my specific case yet.
I start by sending my tickets to my view
[HttpGet]
public ActionResult AddPopcorn()
{
List<Ticket> tickets = new List<Ticket>();
// Fill the list with tickets
return View("AddPopcorn", tickets);
}
In the view I display the tickets with a form and checkbox. The view displays the tickets correctly.
#model List<Domain.Entities.Ticket>
#{
ViewBag.Title = "AddPopcorn";
}
<body>
// Html stuff
#using (Html.BeginForm("AddPopcorn", "Ticket", FormMethod.Post))
{
<table>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.TicketID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.TicketType)
</td>
<td>
#Html.CheckBoxFor(modelItem => item.Popcorn)
</td>
</tr>
}
</table>
<input type="submit" value="Voeg toe!" />
}
</div>
</body>
If people check the checkbox, I want the value 'Popcorn' to be true. So I want the view to return a list of tickets with updated values for popcorn based on the checkbox.
[HttpPost]
public ActionResult AddPopcorn(List<Ticket> model)
{
foreach (var item in model)
{
if (item.Popcorn == true)
{
item.Price = item.Price + 5;
}
}
return RedirectToAction("Payment", "Payment");
}
However, the model returned to AddPopcorn is null. I can't seem to figure out why.
Try changing your foreach loop to a for:
for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>
#Html.DisplayFor(x => Model[i].TicketID)
</td>
<td>
#Html.DisplayFor(x => Model[i].Price)
</td>
// etc
<td>
#Html.CheckBoxFor(x => Model[i].Popcorn)
</td>
</tr>
}
The default model binder uses a specific convention to work out how to bind a list of items, such as Model[0].Popcorn (name). You could check if the HTML for the CheckBox has a name attribute set to that format.
Other than using for, you could also specify a custom EditorTemplate for your Ticket object.
This is because your form isn't actually posting any data back to the controller.
You need input elements to actually be able to retrieve data from the form.
Instead, on the controller, access the model this way:
var model = this.Model
The form will only send data that you've got in input tags, e.g.
<input type="text" name="first_name" />
I want to create a two button which when clicked calls two different actions. I have used Html.BeginForm to create one button.
#using (Html.BeginForm("someAction", "someController"))
{
<button type="submit">OK</button>
}
How do I add a second button without actually nesting two forms? Is there some other way? Kindly help!
This is my code:
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
#Html.DisplayFor(modelItem => item.FName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.ContactNumber)
</td>
<td>
#Html.ActionLink("Edit", "EditEmployee", new { id = item.EmployeeID }) |
#Html.ActionLink("Delete", "DeleteEmployee", new { id = item.EmployeeID })
</td>
</tr>
}
I was getting indentation issues with the buttons while using two form one below the other. I got this fixed without using any form tag. Here is my answer:
<td>
<a href="#Url.Action("EditEmployee", "Employee", new {id = item.EmployeeID})" class="btn btn-warning btn-sm">
Edit
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#Url.Action("DeleteEmployee", "Employee", new { id = item.EmployeeID })" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete the record with employee name #item.UserName')">
Delete
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
I have a View which contains "button" & KendoUI window which is not visible by default.
Index.cshtml:
#(Html.Kendo().Button()
.Name("btnLogin")
.Content("Login")
.Events(e => e.Click("LoginBtn")))
#{Html.Kendo().Window()
.Name("windowLogin")
.Title("Login")
.Content("loading user info...")
.LoadContentFrom("Login", "Account")
.Modal(true)
.Visible(false)
.Iframe(true)
.Draggable()
.Resizable()
.Render();
}
On click of button, modal window is opened which contains form. "Login" action is reurning View containing complete form.
Login.cshtml:
<h2>Login Details</h2>
#Html.ValidationMessage("error")
#using (Html.BeginForm("Login", "Account", FormMethod.Post))
{
<table>
<tr>
<td>
#Html.Label("UserName: ")
</td>
</td>
<td>
#Html.TextBoxFor(user => user.UserName)
</td>
<td>
#Html.ValidationMessageFor(user => user.UserName, "Enter Name")
</td>
</tr>
<tr></tr>
<tr>
<td>
#Html.Label("Password: ")
</td>
<td>
#Html.PasswordFor(user => user.Password)
</td>
<td>
#Html.ValidationMessageFor(user => user.Password, "Enter Password")
</td>
</tr>
<tr></tr>
<tr>
<td>
<input type="submit" value="Login" />
</td>
<td>
<input id="CancelButton" type="button" value="Cancel" />
</td>
</tr>
</table>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
AccountController.cs:
[HttpPost]
public ActionResult Login(User user)
{
var userDetails = ExecuteQueries.GetUser(user);
if (userDetails != null)
{
Session["userName"] = userDetails.UserName;
//FormsAuthentication.RedirectFromLoginPage(user.UserName, true);
}
else
{
ModelState.AddModelError("error", "UserName or Password is incorrect");
}
return View("Login");
}
The problem I am facing is that I am not able to close modal window & reload the parent screen. After successful login my new window is opening in the same modal window, what I want is close the modal window & refresh parent screen.
It's as simple as calling a window.Close(). This script is inside my " Kendo Windowed" view. On successful login before you return the view just set a propoerty on your model to true or something. Model.CloseWindow = true; and put this code in your View Engine
#if (Model.CloseWindow == true)
{
<script>
// close the popup
var w = window.parent.$("#createManualProposalWindow").data("kendoWindow");
w.close();
</script>
}
Here's how the window is defined.
#(Html.Kendo().Window()
.Name("createManualProposalWindow")
.Title("Manual Proposal Details")
.Draggable(true)
.Resizable()
.Scrollable(false)
.Width(880)
.Height(650)
.Visible(false)
.Iframe(true)
.Modal(true)
.Events(e => e
.Close("ManualWindow_close"))
)
You'll see the close event, inside that event you can handle refreshing of the parent page.
function ManualWindow_close() {
var aggGrid = $("#agg_grid").data("kendoGrid");
aggGrid.dataSource.read();
var grid = $("#grid").data("kendoGrid");
grid.dataSource.page(1);
refreshGetContractTotals();
}
i am new to Kendo UI as well as javascript.Using MVC Kendo grid editing with Pop-up mode.I created custom template page(under EditorTemplates folder) for editing when pop-up window opens.There are some textboxes and Kendo Combobox widgets in that page to update records.
Values that coming from textboxes can be send to controller but selected item's value on combobox couldn't be send to controller.How can i do that?
View(Razor)
#model PROJECT.UI.WebService.Proxy.DSrvINFO.PERSONALINFORMATIONS
<div class="row">
<div class="span10">
<div style="overflow-y:scroll;overflow-x:hidden;height: 500px;" >
<table width="100%" cellspacing="5" style="margin: 20px">
<tr>
<td width="10%">
#Html.LabelFor(model => model.NAME)
</td>
<td width="40%">#Html.EditorFor(model => model.NAME)
</td>
<td width="10%">
#Html.LabelFor(model => model.SURNAME)
</td>
<td width="40%">#Html.EditorFor(model => model.SURNAME) </td>
<td width="10%">
#Html.LabelFor(model => model.IDTYPE)
</td>
<td width="40%">
#(Html.Kendo().ComboBox()
.Name("IDTYPES")
.DataTextField("DESCRIPTION").HtmlAttributes(new { style="width:220px"}) /
.DataValueField("REFERENCEID")
// .Filter(FilterType.Contains)
.Placeholder("SELECT")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Details", "Items", new { Code = "IDTYPE", addEmptyRow = false });
}).ServerFiltering(true);
}))
</td>
</tr>
</table>
</div>
</div>
</div>
Controller
public ActionResult PersonUpdate([DataSourceRequest] DataSourceRequest request,Guid id,string name,string surname,string[] IDTYPES) { ....
Here is sample header data that captured from chrome when press update button on on Pop-Up window.IDTYPES values are coming from combobox's selected item object.I need to pass some values of IDTYPE(eg.IDTYPES.CODE,IDTYPES.ID,IDTYPES.REFERENCEID ) to controller from view.
sort:
group:
filter:
CITIZENNO:-
ID:78ef069f-c31b-4828-81e8-4ede52ee0818
NAME:ABDULAZIZ
SURNAME:AL GARNI
IDTYPES.ID:69bd3ef7-fc80-4f26-a978-963ed670d3fe
IDTYPES.REFERENCEID:57ff1ea9-6cb4-4d7e-abc7-caa367fd4627
IDTYPES.CODE:3
IDTYPES.DESCRIPTION:PASSPORT ID
IDTYPES.PARENTID:00000000-0000-0000-0000-000000000000
IDTYPES.ISSELECTED:false
IDTYPES.COUNT:0
IDTYPES.ISACTIVE:false
IDTYPES.ISDEFAULT:false
IDTYPES[ID]:69bd3ef7-fc80-4f26-a978-963ed670d3fe
IDTYPES[REFERENCEID]:57ff1ea9-6cb4-4d7e-abc7-caa367fd4627
IDTYPES[CODE]:3
IDTYPES[DESCRIPTION]:PASSPORT ID
IDTYPES[PARENTID]:00000000-0000-0000-0000-000000000000
IDTYPES[ISSELECTED]:false
IDTYPES[COUNT]:0
IDTYPES[ISACTIVE]:false
IDTYPES[ISDEFAULT]:false
The value from the ComboBox can be retrieved as described in the documentation, using JQuery. After that, you can just post it to your controller using Ajax:
var selectedValue = $("#IDTYPES").data("kendoComboBox").text();
$.ajax({
url: "#Url.Action(actionName, controllerName)" + "/?id="+userid+"&name="+username+"&surname="+usersurname+"&idtype="+selectedValue,
success: function(){ /*handle success*/},
error: function(){ /*handle error*/}
});
You would also need to change your Controller Action definition as bellow. As far as I understand you don't need all the values of the ComboBox, but only the selected value:
public ActionResult PersonUpdate([DataSourceRequest] DataSourceRequest request,Guid id,string name,string surname,string IDTYPE)