Handling Multiple Submit Buttons - asp.net-mvc-2

I Have a Strongly typed user control which i use for Searching a certain list of objects.
the following code shows the user control,
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PeercoreCRM.ViewModels.CustomerFilterViewModel>" %>
<div style="width: 100%;vertical-align:top;background-color:White">
<fieldset>
<legend>Criteria</legend>
<table cellspacing="0">
<tr>
<td style="width: 100px">
<div class="editor-label">
<%: Html.LabelFor(m => m.LeadName) %>
</div>
</td>
<td>
<div class="editor-field">
<%: Html.TextBoxFor(m => m.LeadName) %>
</div>
</td>
</tr>
<tr>
<td style="width: 60px">
<div class="editor-label">
<%: Html.LabelFor(m => m.CustomerCode) %>
</div>
</td>
<td>
<div class="editor-field">
<%: Html.TextBoxFor(m => m.CustomerCode)%>
</div>
</td>
</tr>
<tr>
<td>
<input type="submit" name="btnSearch" value="Search" />
<input type="submit" name="btnCancel" value="Cancel" />
</td>
<td>
</td>
</tr>
</table>
</fieldset>
</div>
In the View, I show this user control conditionally using the following code snippet,
<% using (Html.BeginForm("CustomerList", "Customer", new { isFiltered = Model.FilterViewModel.IsFiltered }, FormMethod.Post))
{
%>
<% if (Model.FilterViewModel.IsVisible) Html.RenderPartial("ListFilterUserControl", Model.FilterViewModel); %>
<% } %>
I have put the Form in the rendering page as this control is used in other views and thereby calling other action methods in different controllers.
I have the following method signature in my controller action method,
[HttpPost]
public ActionResult CustomerList(CustomerFilterViewModel filterModel)
{
bool filtered = filterModel.IsDirty? FilterCustomers(filterModel):false;
Session["CurrentPageNumber"] = null;
return RedirectToAction("CustomerList", new { isFiltered = filtered || filterModel.IsFiltered });
}
My problem is, with this implementation, how can i separately identify which button is clicked ("Search" or "Cancel") and to write the code depending on that.

To identify the button that has been passed in, you can group your buttons by adding a name attribute to them:
<input name="button" type="submit" value="Search" />
<input name="button" type="submit" value="Cancel" />
then, add a variable that is passed into your post method with the same name of the buttons (in this case "button") like this:
[HttpPost]
public ActionResult CustomerList(string button, CustomerFilterViewModel filterModel)
{
if(button.Equals("Search"))
{
bool filtered = filterModel.IsDirty? FilterCustomers(filterModel):false;
Session["CurrentPageNumber"] = null;
return RedirectToAction("CustomerList", new { isFiltered = filtered || filterModel.IsFiltered });
} else {
if(button.Equals("Cancel")) {
//perform cancel
}
}
}

Related

PartialView on each list items

I have a in item list in each row has an edit button, which is supposed to open a partial view with the elements data to edit.
In the loop I use to fill tge datatable, I also create the partial views for each row element.
When I click the buton it always opens the first element partial view, even if I press the Nth element.
How do I get the code to open the corresponding partial view?
Code:
<table class="table table-hover" id="tabela_rota">
<thead>
<tr>
<th>
</th>
<th>
Cliente
</th>
<th>
Rota
</th>
<th>
Distância Ideal
</th>
<th>
Ativa
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<partial>
#{await Html.RenderPartialAsync("Edit", item);}
</partial>
<tr>
<td width="15">
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.id_cliente)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.nome)
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.distancia_ideal)
</td>
<td width="10%">
#Html.DisplayFor(modelItem => item.activa)
</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="openNavEdit()">
Editar
</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</td>
</tr>
}
</tbody>
</table>
JS Function:
function openNavEdit() {
document.getElementById("mySidepanelEdit").style.width = "350px";
}
View:
#model GestaoCircuitos.Models.Rota
#{
ViewData["Title"] = "Editar";
}
<div id="mySidepanelEdit" class="sidepanel">
<div id="top_title">
<h6 id="nova_rota">Editar Rota</h6>
<button class="closebtn" onclick="closeNavEdit()">×</button>
</div>
<div class="row form-row-rotas">
<div class="col-12">
<form asp-action="Edit" class="form-rotas">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="id" />
<div class="form-label-group">
<input id="nome" class="form-control" placeholder="Nome" />
<label asp-for="nome" class="control-label">Nome</label>
<span asp-validation-for="nome" class="text-danger"></span>
</div>
<div class="form-label-group">
<input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
<label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
<span asp-validation-for="distancia_ideal" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="activa" /> Ativa
</label>
</div>
<div class="form-group">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
It's because you're opening based on ID. An ID attribute needs to be unique throughout a document. If you select on an ID, you'll only get the first element.
You'll have to give each edit modal either a unique ID or a class to select from. Try this:
#model GestaoCircuitos.Models.Rota
#{
ViewData["Title"] = "Editar";
}
<div id="sidepanel-edit-#(item.id)" class=" sidepanel">
<div id="top_title">
<h6 id="nova_rota">Editar Rota</h6>
<button class="closebtn" onclick="closeNavEdit(#(item.id))">×</button>
</div>
<div class="row form-row-rotas">
<div class="col-12">
<form asp-action="Edit" class="form-rotas">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="id" />
<div class="form-label-group">
<input id="nome" class="form-control" placeholder="Nome" />
<label asp-for="nome" class="control-label">Nome</label>
<span asp-validation-for="nome" class="text-danger"></span>
</div>
<div class="form-label-group">
<input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
<label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
<span asp-validation-for="distancia_ideal" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="activa" /> Ativa
</label>
</div>
<div class="form-group">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Above, we add a unique id for each edit edit form. Then we can reference those unique id attributes in the main template:
<table class="table table-hover" id="tabela_rota">
<thead>
<tr>
<th>
</th>
<th>
Cliente
</th>
<th>
Rota
</th>
<th>
Distância Ideal
</th>
<th>
Ativa
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<partial>
#{await Html.RenderPartialAsync("Edit", item);}
</partial>
<tr>
<td width="15">
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.id_cliente)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.nome)
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.distancia_ideal)
</td>
<td width="10%">
#Html.DisplayFor(modelItem => item.activa)
</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="openNavEdit(#(item.id)">
Editar
</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</td>
</tr>
}
</tbody>
</table>
and your Javascript would look like:
function openNavEdit(id) {
document.getElementById("sidepanel-edit-" + id).style.width = "350px";
}
function closeNavEdit(id) {
document.getElementById("sidepanel-edit-" + id).style.width = "0";
}
Something to note, I'm assuming your model has an id attribute.

How to submit 2 or more values with one button in JSP Form

I have a table in which there are several rows. For instance a table with flight reservations. To delete one reservation I need to have the customer id number as well as the flight id.
Considering I have only one button to try to submit these values to my Servlet, how do I do so?
I tried hiding one button but the solution doesn't seem to work for me.
I use request.getParameter() (with 2 separate variables of course) to try to fetch both values but at the end only one is captured and the other is null. Any other ideas?
This is an example of the table I have.
flight_id customer_id
Value 1 Value 2
Form buttons :
<section class="about-info-area section-gap">
<div class="container">
<div class="row align-items-center">
<form method="post" action="/admin_reservations" id="form_reservation"></form>
<table class="table table-bordered table-striped" style="float: left;">
<caption style="text-align: center; caption-side: top"><h2>Liste des réservations</h2></caption>
<thead class="thead-dark">
<tr>
<th scope="col">N°Flight</th>
<th scope="col">N°Client</th>
<th scope="col">Flight price</th>
</tr>
</thead>
<tbody>
<% for (Reservation reservation : allReservations) { %>
<tr>
<th scope="row"><% out.println(reservation.getFlight().getFlightNum()); %></th>
<td><% out.println(reservation.getClientNum()); %></td>
<td><% out.println(reservation.getFlightPrice()); %> €</td>
<td align="center">
<input type="submit" class="btn btn-default btn-sm" name="delete_reservation_client"
form="form_reservation" onClick="window.location.reload();" hidden
value="<% out.println(reservation.getClientNum()); %>">
</input>
<button type="submit" class="btn btn-default btn-sm" name="delete_reservation_flight"
form="form_reservation" onClick="window.location.reload();"
value="<% out.println(reservation.getFlight().getFlightNum()); %>"><span
class="glyphicon glyphicon-trash"></span>
Delete
</button>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
</div>
And my Servlet :
if(request.getParameter("delete_reservation_client")!=null &&request.getParameter("delete_reservation_flight")!=null){
int delete_reservation_client = Integer.parseInt(request.getParameter("delete_reservation_client").trim());
int delete_reservation_flight = Integer.parseInt(request.getParameter("delete_reservation_flight").trim());
System.out.println("Client : " + delete_reservation_client);
System.out.println("Flight : " + delete_reservation_flight);
try {
DBUtils.deleteReservation(conn,delete_reservation_client,delete_reservation_flight);
} catch (SQLException e) {
e.printStackTrace();
}
}
Thanks in advance for any help.
Fares
Instead of button use <a> tag and attached both value which you want to delete . i.e :
<td align="center">
<a href="/admin_reservations?delete_reservation_client=<% out.println(reservation.getClientNum()); %>&delete_reservation_flight=<% out.println(reservation.getFlight().getFlightNum()); %>">
<span class="glyphicon glyphicon-trash"></span>
Delete
</a>
And in Servlet get these values in doGet method by writing i.e request.getParameter("delete_reservation_client") and request.getParameter("delete_reservation_flight")

Generated <form> inside Bootstrap-Modal needs to have a unique ID

Well, I searched the whole Internet the last days to find a way to attach an unique ID and/or name to a GENERATED form inside a Bootstrap-Modal and I never succeeded...
I know I'm making mistakes in the code, but I ran out of ideas, I don't know what to use.
*Edit: I'm using Bootstrap 3, I created a table, having a live search field using JavaScript. The table rows are displayed from a database using a query. The last column of the row pops up a Bootstrap-Modal inside which a form is located, now here is the problem! I managed to assign a unique ID to each Modal and each Modal popup button, but the form! From here everything is mist.
Here is the code:
<div id="fm-<?php echo $row['PacientID']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
<b>
Fișa medicală #<?php echo $row['PacientID']; ?>: <?php echo $row['Name'].' '.$row['Surname']; ?>
</b>
</h4>
<?php
if (isset ($entranceSuccess))
{
?>
<div class="alert alert-success text-center">
<?php echo $entranceSuccess; ?>
</div>
<?php
}
?>
<?php
if (isset ($entranceError))
{
?>
<div class="alert alert-danger text-center">
<?php echo $entranceError; ?>
</div>
<?php
}
?>
</div>
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Data Intrării</th>
<th class="text-center">Medic Stomatolog</th>
<th class="text-center">Tratament</th>
<th class="text-center">Achitat</th>
</tr>
</thead>
<tbody>
<?php
$intrari = "SELECT * FROM intrari";
$intrariResults = $db -> query($intrari);
while ($row2 = $intrariResults -> fetch_assoc())
{
if ($row2['Pacient'] == $row['PacientID'])
{
?>
<tr class="text-center">
<th scope="row" class="text-center">
<?php echo $row2['EntranceDate'];?>
</th>
<td>
<?php
if ($row2['Medic'] == 1)
{
echo 'Dr. Carmen Pădurean';
}
else if ($row2['Medic'] == 2)
{
echo 'Dr. Claudiu Șuc';
}
else if ($row2['Medic'] == 3)
{
echo 'Dr. Mihaela Toncean';
}
else if ($row2['Medic'] == 4)
{
echo 'Dr. Alexandra Cenan';
}
else
{
echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
}
?>
</td>
<td>
<?php echo $row2['Treatment'];?>
</td>
<td>
<?php echo $row2['Achitat'];?>
</td>
</tr>
<?php
}
}
?>
<tr>
<th scope="row" class="text-center">
<div class="form-group">
<div class="input-group date entranceDateField">
<input type="text" class="form-control" id="entranceDate" name="entranceDate">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control" id="medic" name="medic">
<option value="1">Dr. Carmen Pădurean</option>
<option value="2">Dr. Claudiu Șuc</option>
<option value="3">Dr. Mihaela Toncean</option>
<option value="4">Dr. Alexandra Cenan</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="treatment" name="treatment">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="achitat" name="achitat">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="addEntrance" name="addEntrance-<?php echo $row['PacientID'];?>">
<span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
</button>
<?php
if (isset ($_POST['addEntrance-<?php echo $row[PacientID]; ?>']))
{
$entranceDate = $_POST['entranceDate'];
$pacient = $row['PacientID'];
$medic = $_POST['medic'];
$treatment = $_POST['treatment'];
$achitat = $_POST['achitat'];
$insertEntrance = "INSERT INTO intrari (EntranceDate, Pacient, Medic, Treatment, Achitat)
VALUES ('$entranceDate', '$pacient', '$medic', '$treatment', '$achitat')";
if (mysqli_query ($db, $insertEntrance))
{
$entranceSuccess = "Pacientul a fost adăugat în baza de date cu succes!";
}
else
{
$entranceError = "A apărut o eroare nedefinită! Suna-l pe Andrei (0755 696 200) și dictează-i: \"Error code: " . mysqli_error ($db) . "\"";
}
}
?>
</div>
</form>
</div>
</div>
By looking at your code, I see you are putting Modal HTML inside loop and by assigning unique id's to modal selector id="fm-<?php echo $row['PacientID']; ?>" trying to create multiple modals with unique id(s), it will cause the page to load slow and running queries inside each unique modal fetching the records from database when even you don't need fetched records on page load, it's not a good practice,
so let's go one step backward and remove the Modal from while loop and put it outside and remove <?php echo $row['PacientID']; ?> from Modal id selector.
<div id="fm" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
//Modal-Header, Modal-Body, Modal-Footer Comes Here
</div>
</div>
</div>
Now as you stated The last column of the row pops up a Bootstrap-Modal
Assuming you are triggering the modal with default behaviour with data attributes data-toggle="modal" data-target="#fm" and you have other information in other columns of rows like <?php echo $row['Name'].' '.$row['Surname']; ?> so you must have something like
<tr>
<td><?php echo $row['PacientID']; ?></td>
<td><?php echo $row['Name'].' '.$row['Surname']; ?></td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>
</tr>
Now Let's pass the pacientid and name to modal, Add data-attribute data-pacient to name col and to modal trigger button so above table col's will be
<tr>
<td><?php echo $row['PacientID']; ?></td>
<td><span class="pacientname" data-pacient="<?php echo $row['PacientID']; ?>"><?php echo $row['Name'].' '.$row['Surname']; ?></span></td>
<td><button type="button" data-pacient="<?php echo $row['PacientID']; ?>" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>
</tr>
With bootstrap modal event listener, you can pass the information to modal when modal about to show or shown
$(document).ready(function(){ //Dom Ready
$('#fm').on('show.bs.modal', function (e) { //Show event listener
var id = $(e.relatedTarget).data('pacient'); //Fetch val from modal data-attribute
var name = $('.pacientname[data-pacient="' + id +'"]').html(); //fetch val from selector `pacientname` data-attribute with match the val of modal button data-attribute
$(".pid").html(id); //selector inside modal header to pass id
$(".pname").html(name); //selector inside modal header to pass name
$("#addEntrance").val(id); //Passing id to hidden input in form, explained below
//Ajax method comes here which explains below
});
});
Modal-Header
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="pid"></span> <span class="pname"></span></h4>
</div>
Fiddle Example to pass information to modal
Now about the query you are running inside modal, it can be done via Ajax method and display the information in modal. As we already have the required variable var id = $(e.relatedTarget).data('pacient'); can use it to fetch the required information via Ajax method
var dataString = 'id='+ id;
alert(dataString);
$.ajax({
type: "POST",
url: "file.php", //Create this file and handle query in it.
data: dataString,
cache: false,
success: function (data) {
$("#morecontent > tbody.showHere").html(data); //show fetched information from database
}
});
and file.php will be
<?php
//Database Connection Here
if(isset($_POST["id"])) {
$id = $_POST["id"]; //escape the string
$queryIntrari = "SELECT * FROM intrari WHERE Pacient = '$id'";
$intrariResults = $db -> query($queryIntrari);
while ($row2 = $intrariResults -> fetch_assoc()){
?>
<tr class="text-center">
<th scope="row" class="text-center">
<?php echo $row2['EntranceDate'];?>
</th>
<td>
<?php
if ($row2['Medic'] == 1)
{
echo 'Dr. Carmen Pădurean';
}
else if ($row2['Medic'] == 2)
{
echo 'Dr. Claudiu Șuc';
}
else if ($row2['Medic'] == 3)
{
echo 'Dr. Mihaela Toncean';
}
else if ($row2['Medic'] == 4)
{
echo 'Dr. Alexandra Cenan';
}
else
{
echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
}
?>
</td>
<td><?php echo $row2['Treatment'];?></td>
<td><?php echo $row2['Achitat'];?></td>
</tr>
<?php } } ?>
and the Modal-body, Modal-Footer with form and information fetched from database using Ajax will be like
<table class="table table-hover table-bordered" id="morecontent">
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<input type="hidden" id="addEntrance" name="addEntrance" value="">
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Data Intrării</th>
<th class="text-center">Medic Stomatolog</th>
<th class="text-center">Tratament</th>
<th class="text-center">Achitat</th>
</tr>
</thead>
<tbody class="showHere">
//Information Fetched from Database Using Ajax will show Here
</tbody>
<tbody>
<tr>
<th scope="row" class="text-center">
<div class="form-group">
<div class="input-group date entranceDateField">
<input type="text" class="form-control" id="entranceDate" name="entranceDate">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control" id="medic" name="medic">
<option value="1">Dr. Carmen Pădurean</option>
<option value="2">Dr. Claudiu Șuc</option>
<option value="3">Dr. Mihaela Toncean</option>
<option value="4">Dr. Alexandra Cenan</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="treatment" name="treatment">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="achitat" name="achitat">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">
<span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
</button>
</div>
</form>
Note: Created a hidden input in <form> above, passed the value <?php echo $row['PacientID']; ?> to the hidden input when modal show, Post this hidden input along with other inputs when submitted the form in modal to insert or update values into database
an example here
Mission accomplished and hope you figure it out how to pass and get information in modal
Note: You can submit the modal form either the way you are doing or can also do it with Ajax and show success or error message inside modal without closing it and leaving the page but that's another story to tell some other time.
Happy Coding.

Passing data from table to Modal Table

I have two tables for my inventory first is the Item List then the Item Info
I bind the Item List to a HTML Table the add a button for each row the purpose of the button is to show the Item Info or table via modal
I have already done the table and modal design but i cant get or pass the Item ID for my Item List to my modal
can anyone help me i'm kind a new in HTML (noob hir :3)
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Particular</th>
</tr>
</thead>
<tbody class="searchable">
<% List<Inventory.MODEL.adminView>x = new List
<Inventory.MODEL.adminView>(); Inventory.BAL.ItemBAL z = new Inventory.BAL.ItemBAL(); x = z.getAdminView().ToList(); foreach (var item in x) {%>
<tr>
<td>
<%=i tem.ID %>
</td>
<td>
<%=i tem.Particulars %>
</td>
<%}%>
<td class="text-center">
<span class='glyphicon glyphicon-info-sign'></span>
</td>
</tr>
<%} %>
</tbody>
</table>
</div>
</div>
<div id="Modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Item Inventory</h4>
</div>
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Total Quantity</th>
</tr>
</thead>
<tbody>
<% iteminvents(); %>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
that's my code, anyone can advice or can help me ?
Pass this in myFunction() as argument , As myFunction(this)
and inside function you can get ItemId as below. I have used jquery here.
function myFunction(sender)
{
var CurrentRow=$(sender).closest("tr");
var ItemId=$("td:eq(0)",$(CurrentRow)).html(); // Can Trim also if needed
}

why partial view not loading

I have jquery like this and i am trying to load partial view but it not working it shows dialog box without any control
mvcJqGrid.demo.edit = function(id) {
var grid = $('#Products');
var myCellData = grid.jqGrid('getCell', id, 'ProductId');
GetProduct(myCellData);
return false;
};
function GetProduct(id)
{
$("#dialog-form").load("#Url.Action("EditProduct","Admin")",
function (response, status, xhr) {
$("#dialog-form").dialog('open');
});
} ;
my action is:
[HttpPost]
public ActionResult EditProduct(string productId)
{
int id = 0;
Product product = null;
bool result = int.TryParse(productId,out id);
ProductModel productModel=new ProductModel();
Session["ProductModule"] = productModel.GetProduct(id);
return PartialView("Product_Partial", Session["ProductModule"] as ProductModel);
//return RedirectToAction("Product", "Admin");
}
my Partial View is:
#using (Html.BeginForm("Product","Admin",method:FormMethod.Post))
{
<fieldset>
<legend>Product Information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.ProductTitle)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ProductTitle)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.ProductTypeId)
</div>
<div>
<select name="ProductType">
<option value="null">Select ProductType</option>
#foreach (var row in new Database("MyConnectionString").Query<LookUp>("select * from Lookup where LookupTypeId=(select LookupTypeId from LookupType where LookupTypeName=#0)", "ProductType"))
{
<option value="#row.LookupId">#row.LookupName</option>
}
</select>
</div>
<div class="editor-label">
#Html.LabelFor(m => m.BrandId)
</div>
<div >
<select name="Brand">
<option value="null">Select Brand</option>
#foreach (var row in new Database("MyConnectionString").Query<LookUp>("select * from Lookup where LookupTypeId=(select LookupTypeId from LookupType where LookupTypeName=#0)", "Brand"))
{
<option value="#row.LookupId">#row.LookupName</option>
}
</select>
</div>
<div class="editor-label">
#Html.LabelFor(m => m.BasePrice)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.BasePrice)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.ProductSpecification)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ProductSpecification)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.ProductSummary)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.ProductSummary)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.IsOutOfStock)
</div>
<div class="ui-icon-check">
#Html.CheckBoxFor(m => m.IsOutOfStock)
</div>
<table>
<tr>
<td>
<input type="submit" value="Add" onclick="#Url.Action("Product", "Admin")" />
</td>
<td>
<button type="submit" id="btnDelete" name="Command" value="Update" onclick="#Url.Action("Product", "Admin")" >Update</button>
</td>
<td>
<button type="submit" id="btnSearch" name="Command" value="Delete" onclick="#Url.Action("Product", "Admin")">Delete</button>
</td>
</tr>
</table>
</fieldset>
}
my view page :
<div id="dialog-form" title="Add New Product">
</div>
I don' t see the initialization of the plugin here..
i see directly :
$("#dialog-form").dialog('open');
but where initialize you the dialog with options ?
i think that you should initialize dialog in your success response instead of calling directly the function 'open'.
Look at doc jquery ui dialog
$("#dialog-form").load("#Url.Action("EditProduct","Admin")",
function (response, status, xhr) {
$( "#dialog-form" ).dialog();
});
I hope that'll help you