In this article, I describe how to open popup in mvc usingjquery. Here I am using jquery-ui.js and jquery-ui.css. Here I demonstrate with adding sales items. please referthese below link to add js and css file .
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css
In Demo.cshtml
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
@using (Html.BeginForm())
{
<input type="button" id="btnShow" value="ShowPopup" />
<div id="dialog" style="display: none" align="center">
<fieldset>
<legend>Add Item</legend>
<table>
<tr>
<td>
<label>ItemName :</label>
</td>
<td>
@Html.TextBox("ItemName")
</td>
</tr>
<tr>
<td>
<label>Qty :</label>
</td>
<td>
@Html.TextBox("Qty")
</td>
</tr>
<tr>
<td>
<label>Sales Price :</label>
</td>
<td>
@Html.TextBox("UnitPrice")
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Save" onclick="Add()" />
<input type="button" value="Cancel" onclick="Close()" />
<br />
<br />
</td>
</tr>
</table>
</fieldset>
</div>
}
Post your comments / questions
Recent Article
- Import "django.shortcuts" could not be resolved from source in Django Project
- How to add two numbers in Android Studio? | Source Code
- FindViewByID returns null in android studio -SOLVED
- Saving changes is not permitted in SQL SERVER - [SOLVED]
- Restore of database failed. File cannot be restored over the existing. -[SOLVED]
- One or more projects in the solution were not loaded correctly in Visual Studio 2019 | FIXED
- How to find Laptop's Battery Health?
- SOLVED-Related Field got invalid lookup: icontains error in Django
Related Article