How to implement tree using razor pages
The sequence I was trying to implement is this: If you click the data
of record, all records that have the record as the parent record are
searched and displayed.
Determining the record to show is to get True/false data through the
checkbox and decide whether to show the child or not.
However, I found that the data of the checkbox is initialized when the
page is loaded through return page().
so i test this
public async Task<IActionResult> OnPostReWork()
{
if (!booTest)
booTest = true;
else
booTest = false;
await _context.SaveChangesAsync();
return Page();
}
this booTest is always false
public class TreeNode
{
public List <string> subTreeNodes; //하위 오브젝트들
public string dataName;
public bool boolData;
public TreeNode(List<string> treeNodex)
{
subTreeNodes = treeNodex;
}
}
update
in cshtml
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: loaderSpin 2s linear infinite;
}
</style>
</head>
<body>
<h2>Tree View</h2>
<div class="loader" style="display: none;" id="loader"></div>
<form method="post">
#*<input asp-page-handler="ReWork" class="btn" type="submit" value="검증요청취소" />*#
#* 여기에 첫번쨰 treenode만 넣어주면 모든 트리노드 재귀로 검색함*#
<input type="checkbox"
onclick="requestMyAction('#Model.tree_List[0].board_id', this.checked, 'loader-#Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-#Model.tree_List[0].dataName">#Model.tree_List[0]
#RecursiveData(Model.tree_List[0]);
</div>
#*<input type="checkbox"
onclick="requestMyAction('#Model.tree_List[0].board_id', this.checked, 'loader-#Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-#Model.tree_List[0].dataName">#Model.tree_List[0]</div>*#
</form>
#section scripts{
<script type="text/javascript">
function requestMyAction(itemId, isChecked, loaderId) {
document.getElementById(loaderId).style.display = "inline-block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
document.getElementById(loaderId).style.display = "none";
if (this.status === 200) {
document.getElementById(loaderId).style.display = "none";
}
}
};
var url = '#Url.Page("./TreeExample", "MyAction")';
xhr.open('POST', url);
xhr.setRequestHeader('RequestVerificationToken', '#Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
var data = new FormData();
data.append('itemName', itemId);
data.append('deploy', isChecked);
xhr.send(data);
}
;
</script>
}
</body>
</html>
#{
string RecursiveData(TreeWithUnity.Model.TreeNode tn)
{
if (tn.deployment)
{
<input type="checkbox"
onclick="requestMyAction('#tn.board_id', this.checked, 'loader-#tn.dataName');" />
<div class="loader" style="display: none;" id="loader-#tn.dataName">#tn.dataName</div>
<br />
for (int i = 0; i < tn.subTreeNodes.Count; i++)
RecursiveData(tn.subTreeNodes[i]);
}
return "Tree";
}
}
Finally, I succeeded in calling a function in cs from JavaScript.
enter link description here
this page url.home error
<h2>Tree View</h2>
<div class="loader" style="display: none;" id="loader"></div>
<form method="post">
#*<input asp-page-handler="ReWork" class="btn" type="submit" value="검증요청취소" />*#
#* 여기에 첫번쨰 treenode만 넣어주면 모든 트리노드 재귀로 검색함*#
<input type="checkbox"
onclick="requestMyAction('#Model.tree_List[0].board_id', this.checked, 'loader-#Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-#Model.tree_List[0].dataName">#Model.tree_List[0]
#RecursiveData(Model.tree_List[0]);
</div>
#*<input type="checkbox"
onclick="requestMyAction('#Model.tree_List[0].board_id', this.checked, 'loader-#Model.tree_List[0].dataName');" />
<div class="loader" style="display: none;" id="loader-#Model.tree_List[0].dataName">#Model.tree_List[0]</div>*#
</form>
#section scripts{
<script type="text/javascript">
function requestMyAction(itemId, isChecked, loaderId) {
document.getElementById(loaderId).style.display = "inline-block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
document.getElementById(loaderId).style.display = "none";
if (this.status === 200) {
document.getElementById(loaderId).style.display = "none";
}
}
};
var url = '#Url.Page("./TreeExample", "MyAction")';
xhr.open('POST', url);
xhr.setRequestHeader('RequestVerificationToken', '#Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
var data = new FormData();
data.append('itemName', itemId);
data.append('deploy', isChecked);
xhr.send(data);
}
;
</script>
}
</body>
</html>
Note that url.page is not assigned a url
And I edit new questions because I think it is right to organize them and post them anew.
Related
I have a function that fetch the data based on the user's registration number on the active directory and print it to the textbox fields on the modal. In that case I need to send as a parameter whatever is written in the textbox instead of the field numbered 31919 in the code below.
<center>
<image style="margin-top: 20px; width: 25%;" src="/images/adduser.png"></image>
<div style="margin-top: 25px;">
<form method="post">
<label class="control-label"><b>Reg. No</b></label>
<input type="text" name="RegNo" id="RegNo" value="">
<button onclick="created(1)" style="margin-left: 15px; height: 60%;" data-toggle="modal" data-target="#AddUser1" type="button" class="btn btn-light-primary px-6 font-weight-bold">Fetch</button>
<span id="spin"><i style="position: relative; display: inline-block;" class="fas fa-sync fa-spin"></i></span>
</form>
#{
FetchDataFromAD("31919");
}
<hr />
</div>
</center>
So, basically I'm trying to do something like this:
#{
FetchDataFromAD(RegNo.Text);
}
P.S.: FetchDataFromAD just a function that modifying string expressions like that:
public void FetchDataFromAD(string RegNo)
{
System.DirectoryServices.DirectorySearcher search = new System.DirectoryServices.DirectorySearcher(directoryEntry);
search.Filter = "(postalCode=" + RegNo + ")";
foreach (System.DirectoryServices.SearchResult sResultSet in search.FindAll())
{
// Ad
FetchADPersonelName = GetProperty(sResultSet, "cn");
FetchADTitle = GetProperty(sResultSet, "title");
FetchADNetworkN = GetProperty(sResultSet, "samaccountname");
FetchADEmail = GetProperty(sResultSet, "mail");
FetchADAdress = "2";
// FetchADDepartman = GetProperty(sResultSet, "department");
}
}
How can I achieve that? Thank you for any suggestions.
Consider to use the following:
<script>
function ApplyFilter() {
var regno = document.getElementById("RegNo").value;
$.ajax({
type: "GET",
url: '#Url.Action("FetchDataFromAD", "Home")',
contentType: "application/json;charset=utf-8",
data: { regno },
dataType: "json",
success: function (data) {
}
});
};
</script>
<div style="margin-top: 25px;">
<form method="post">
<label class="control-label"><b>Reg. No</b></label>
<input type="text" name="RegNo" id="RegNo" value="">
<button onclick="ApplyFilter()" style="margin-left: 15px; height: 60%;" data-toggle="modal" data-target="#AddUser1" type="button" class="btn btn-light-primary px-6 font-weight-bold">Fetch</button>
<span id="spin"><i style="position: relative; display: inline-block;" class="fas fa-sync fa-spin"></i></span>
</form>
<hr />
</div>
And the FetchDataFromAD() method signature update to be called from JavaScript:
public JsonResult FetchDataFromAD(string RegNo)
{
... your code here
return Json("Filter is applied", JsonRequestBehavior.AllowGet);
}
Im trying to show order with certain date range, so i create webgrid to show Orders and when user push the expand button the subgrid for the detail order is show up, but it always show like this :
The last column not removed so my detail items are always shown up and the expand and collapse image not show up in the first column (so it cannot be expaned or collapsed)
My references are:
http://www.dotnetawesome.com/2014/07/nested-webgrid-with-expand-collapse-in-aspnet-mvc4.html
This is my code :
View:
#model Master.Models.Orders
#{
ViewBag.Title = "Orders";
}
#{
<style type="text/css">
th, td {
padding: 5px;
}
th {
background-color: rgb(248, 248, 248);
}
#gridT, #gridT tr {
border: 1px solid #0D857B;
}
#subT, #subT tr {
border: 1px solid #f3f3f3;
}
#subT {
margin: 0px 0px 0px 10px;
padding: 5px;
width: 95%;
}
#subT th {
font-size: 12px;
}
.hoverEff {
cursor: pointer;
}
.hoverEff:hover {
background-color: rgb(248, 242, 242);
}
.expand {
background-image: url(/Images/plus.png);
background-position-x: -22px;
background-repeat: no-repeat;
}
.collapse1 {
background-image: url(/Images/plus.png);
background-position-x: -2px;
background-repeat: no-repeat;
}
</style>
}
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-5:+5"
});
});
$(document).ready(function () {
var size = $("#main #gridT > thead > tr >th").size(); // get total column
$("#main #gridT > thead > tr >th").last().remove(); // remove last column
$("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
$("#main #gridT > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("expand")
.addClass("hoverEff")
.attr('title', "click for show/hide")
);
//Now get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
// ADD CLICK EVENT FOR MAKE COLLAPSIBLE
$(".hoverEff", this).on("click", function () {
$(this).parent().closest("tr").next().slideToggle(100);
$(this).toggleClass("expand collapse1");
});
});
//by default make all subgrid in collapse mode
$("#main #gridT > tbody > tr td.expand").each(function (i, el) {
$(this).toggleClass("expand collapse1");
$(this).parent().closest("tr").next().slideToggle(100);
});
});
</script>
}
<div class="col-md-12 col-sm-12" style="background-color:whitesmoke; margin-top:10px; margin-bottom:10px;">
<div class="col-md-1 col-sm-1"><h5>Period</h5></div>
<div class="row">
#using (Html.BeginForm("CustomersOrders", "Master"))
{
<div class="form-group row">
<div class="col-md-3">
#Html.EditorFor(m => m.FirstDate, new { htmlAttributes = new { #class = "form-control", #readonly = "true" } })
</div>
<div class="col-md-3">
#Html.EditorFor(m => m.LastDate, new { htmlAttributes = new { #class = "form-control", #readonly = "true" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-3">
<input type="submit" value="Show" class="btn btn-success" />
</div>
</div>
}
</div>
</div>
<div id="main" #*class="col-md-12 col-sm-12 tabel row"*# style="padding:25px; background-color:white;">
#{
WebGrid grid = new WebGrid(Model.listData);
#grid.GetHtml(
htmlAttributes: new { id = "gridT" },
tableStyle: "table table-bordered table-responsive",
//fillEmptyRows: false,
//headerStyle: "gvHeading",
//alternatingRowStyle: "gvAlternateRow",
//rowStyle: "gvRow",
//footerStyle: "gvFooter",
//mode: WebGridPagerModes.All,
//firstText: "<< First",
//previousText: "< Prev",
//nextText: "Next >",
//lastText: "Last >>",
columns: grid.Columns (
grid.Column("list.Code", header:"Code"),
grid.Column("list.TotalValue", header:"Total"),
grid.Column("list.Customers", header:"Customer"),
grid.Column(format:(item)=>{
WebGrid subGrid = new WebGrid(source: item.ListDetail);
return subGrid.GetHtml(
htmlAttributes: new { id="subT" },
columns:subGrid.Columns(
subGrid.Column("Detail", header:"Detail"),
subGrid.Column("Item", header:"Item"),
subGrid.Column("Qty", header:"Qty"),
subGrid.Column("Value", header:"Value")
)
);
})
)
)
}
</div>
My layout :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Produksi</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Transaction", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Orders</li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="margin-top:2px; margin-right:2px; text-align:right;">
<p><b>#Session["UserCode"]</b></p>
Logout
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
</footer>
</div>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="../../Content/themes/base/datepicker.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet"
type="text/css" />
#RenderSection("scripts", required: false)
</body>
</html>
I don't know why but when i downgrade the version jquery.js file from 3.3.1 to 1.7.1, it's worked, so I think i'll stick up with 1.7.1 for a while
I am currently learning Angular Js . I added the ADO.NET Entitly model in my project and Angular Js Packages as well. I am unable to do insert like user registration from my registration page. I lunch the developer tools and its showing following error ...
Module.js:5 Uncaught ReferenceError: angular is not defined
at Module.js:5
at Module.js:60
user.png Failed to load resource: the server responded with a status of 404 (Not Found)
load.png Failed to load resource: the server responded with a status of 404 (Not Found)
angular.min.js:42 Uncaught Error: [$injector:modulerr]
Here is my Code in Module.js file under MyScript Folder..
var app;
(function () {
var app = angular.module("myApp", []);
app.controller("Ctrl", ['$scope', function ($scope){
$scope.SaveUser = function () {
$("#divLoading").show();
var User = {
FName: $scope.fName,
LName: $scope.lName,
Email: $scope.uEmail,
Password: $scope.uPwd,
UserName: $scope.uName
};
var response = myService.AddUser(User);
response.then(function (data) {
if (data.data == "1") {
$("#divLoading").hide();
clearFields();
alert("User Created !");
window.location.href = "/Register/Login";
}
else if (data.data == "-1") {
$("#divLoading").hide();
alert("user alraedy present !");
}
else {
$("#divLoading").hide();
clearFields();
alert("Invalid data entered !");
}
});
}
function clearFields() {
$scope.fName = "";
$scope.lName = "";
$scope.Email = "";
$scope.Password = "";
$scope.UserName = "";
}
}]);
app.service("myService", function ($http) {
this.AddUser = function (User) {
var response = $http({
method: "post",
url: "/Register/AddUser",
data: JSON.stringify(User),
dataType: "json"
});
return response;
}
})
})();
Here is my code in controller.The name of my controller is RegisterController ..
public class RegisterController : Controller
{
public ActionResult Register()
{
return View();
}
//To check that user entered is already present or not.
public bool CheckUser(string user)
{
bool Exists = false;
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
var uName = context.UserLogins.Where(x => x.UserName == user).ToList();
if (uName.Count != 0)
{
Exists = true;
}
}
return Exists;
}
//For saving the user details in database table.
public string AddUser(UserLogin usr)
{
if (usr != null)
{
if (CheckUser(usr.UserName) == false)
{
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
UserLogin createUser = new UserLogin();
createUser.UserName = usr.UserName;
createUser.Firstname = usr.Firstname;
createUser.Lastname = usr.Lastname;
createUser.Email = usr.Email;
createUser.DateTimeCreated = DateTime.Now;
createUser.Password = Utility.Encryptpassword(usr.Password);
context.UserLogins.Add(createUser);
context.SaveChanges();
}
return "User created !";
}
else
{
return "User already present !";
}
}
else
{
return "Invalid Data !";
}
}
}
}
Here is HTML CODE ...
#{
Layout = null;
}
<html ng-app="myApp">
<head>
<title>Register</title>
<script src="~/Scripts/MyScript/Module.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-controller="myCntrl">
<br />
<div class="row">
<img src="~/Content/Images/user.png" /><h4>Register User</h4>
<hr />
<br />
<div class="col-md-6">
<form name="userForm" novalidate>
<div class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
First Name :
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" name="fName" ng-model="fName" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
Last Name :
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" name="lName" ng-model="lName" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de">
Email :
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="User's Email" name="uEmail" ng-model="uEmail" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
Username :
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Username" name="uName" ng-model="uName" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
Password :
</div>
<div class="col-md-6">
<input type="password" class="form-control" placeholder="Password" name="uPwd" ng-model="uPwd" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-3">
<input type="button" value="Save" ng-click="SaveUser();" class="btn btn-success" />
</div>
<div class="col-md-3">
#Html.ActionLink("Sign in", "Login", "Register", new { #class = "btn btn-info" })
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
please wait...<img src="~/Content/images/load.png">
</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here is Screen Shot when I run the application Click here ]1
Any one help me to solved this Error
remove the first var app;
It is like you are declaring the app twice, try this
var app = angular.module("myApp", [])
.controller('myCntrl',['$scope',function($scope){
// your code here
}])
.service();
UPDATE
In the Module.js, you have defined the name of your controller app.controller("Ctrl",), but in the html File when you're calling it, you wrote ng-controller='myCntrl'
You have to give them the same name, that's it
Suppose we select the row in gridview then we get the one number from gridview. Suppose we get 8 number from gridview then how to add the Eight rows in html table with textboxes. is it possible, and how it use with jquery .append(), Thanks in Advance.
I am not sure that I understand the question properly, but yes it is possble and very simple with jquery. Your script should look something like:
function appendTable(numberOfRows) {
var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
for (var i = 0; i < numberOfRows; i++) {
$('#yourTable').append(row);
}
}
Here is a complete example for add row and remove row :
<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-add").on('click', function() {
var singleRow = $(".singleRow").eq(0).clone();
singleRow.find('.btn-add')
.removeClass('btn-succcess')
.addClass('btn-danger')
.removeClass('btn-add')
.addClass('remove')
.html("X");
singleRow.find('input').each(function(i, input) {
$(input).val('');
});
$("#wrapper").append(singleRow);
});
$(document).on('click', ".remove", function() {
$(this).parent().remove();
});
});
</script>
<style type="text/css">
.singleRow {
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<form role="form" autocomplete="off" id="wrapper">
<div class="row singleRow">
<div class="col-md-3">
<input class="form-control" name="name[]" type="text">
</div>
<div class="col-md-3">
<input class="form-control" name="phone[]" type="text">
</div>
<div class="col-md-1">
<select name="opt[]" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add">
+
</button>
</div>
</form>
</div>
</body>
</html>
I have this script that basically has 4 select boxes, what I want is that for the 2 top select boxes, he submits the optionvalue that is selected to an action (which can be found at "ProductKoppeling/ProductKoppelingPartial"), I want to let him submit this data when I click on an option but without page refresh.
I tried JSON and I tried Ajax, but I didn't get it working..
How should i do this?
Script:
<script language="javascript" type="text/javascript">
function delete_1() {
var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?")
if (answer) {
document.getElementById('Actie_1').value = '5';
document.getElementById('hpg_submit').submit();
}
}
function delete_2() {
var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?")
if (answer) {
document.getElementById('Actie_2').value = '6';
document.getElementById('pg_submit').submit();
}
}
function delete_3() {
var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?")
if (answer) {
document.getElementById('Actie_3').value = '6';
document.getElementById('p_submit').submit();
}
}
</script>
CSHTML:
<div style="width: 500px; float: left;">
#using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "onload_submit" }))
{
#Html.DropDownList("Klant.Id", (ViewBag.Klant as SelectList), new { onchange = "document.getElementById('onload_submit').submit()" })
}
<div style="clear: both"></div>
<div style="float: left;">
<b>Hoofdgroepen</b><br />
#using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "hpg_submit" }))
{
if (ViewBag.SelectedKlant != null)
{
<input type="hidden" name="Klant.Id" value="#ViewBag.SelectedKlant.Id" />
}
<select style="width: 200px;" size="6" id="HoofdProductGroep" name="HoofdProductGroep.Id" onchange="document.getElementById('hpg_submit').submit();">
#foreach (var hpg in ViewBag.HoofdProductGroep)
{
if (ViewBag.SelectedHPG != null)
{
if (hpg.Id == ViewBag.SelectedHPG.Id)
{
<option value="#hpg.Id" selected="selected">#hpg.Naam</option>
}
else
{
<option value="#hpg.Id">#hpg.Naam</option>
}
}
else
{
<option value="#hpg.Id">#hpg.Naam</option>
}
}
</select>
<input type="hidden" name="Actie" id="Actie_1" value="0" />
<br />
<img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_1').value='1';document.getElementById('hpg_submit').submit();" />
<img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_1').value='2';document.getElementById('hpg_submit').submit();" />
<img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_1()" />
}
</div>
<div style="float: right;">
<b>Groepen</b><br />
#using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "pg_submit" }))
{
if (ViewBag.SelectedHPG != null)
{
<input type="hidden" name="HoofdProductGroep.Id" value="#ViewBag.SelectedHPG.Id" />
}
if (ViewBag.SelectedKlant != null)
{
<input type="hidden" name="Klant.Id" value="#ViewBag.SelectedKlant.Id" />
}
<select size="6" style="width: 200px;" id="ProductGroep_Id" name="ProductGroep.Id" onchange="document.getElementById('pg_submit').submit();">
#foreach (var pg in ViewBag.ProductGroep)
{
if (ViewBag.SelectedPG != null)
{
if (pg.Id == ViewBag.SelectedPG.Id)
{
<option value="#pg.Id" selected="selected">#pg.Naam</option>
}
else
{
<option value="#pg.Id">#pg.Naam</option>
}
}
else
{
<option value="#pg.Id">#pg.Naam</option>
}
}
</select>
<input type="hidden" name="Actie" id="Actie_2" value="0" />
<br />
<img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_2').value='3';document.getElementById('pg_submit').submit();" />
<img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_2').value='4';document.getElementById('pg_submit').submit();" />
<img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_2()" />
}
</div>
<div style="clear: both; height: 25px;"></div>
#using (Html.BeginForm("Save", "ProductKoppeling", FormMethod.Post, new { id = "p_submit" }))
{
<div style="float: left">
<b>Producten</b><br />
<select size="18" style="width: 200px;" name="Product.Id">
#foreach (var p in ViewBag.Product)
{
<option value="#p.Id">#p.Naam</option>
}
</select>
#if (ViewBag.SelectedPG != null)
{
if (ViewBag.SelectedPG.Id != null)
{
<input type="hidden" name="ProductGroep.Id" value="#ViewBag.SelectedPG.Id" />
}
}
<input type="hidden" name="Actie" id="Actie_3" value="0" />
<br />
<img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_3').value='1';document.getElementById('p_submit').submit();" />
<img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_3').value='2';document.getElementById('p_submit').submit();" />
<img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_3()" />
<br />
</div>
<div style="float: left; width: 100px;">
<center>
<br /><br /><br /><br />
<a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('p_submit').submit();">»</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('pgp_submit').submit();">«</a>
</center>
</div>
}
<div style="float: right;">
<b>Producten in groepen</b><br />
#using (Html.BeginForm("Delete", "ProductKoppeling", FormMethod.Post, new { id = "pgp_submit" }))
{
<select size="18" style="width: 200px;" name="ProductGroepProduct.Id">
#foreach (var pgp in ViewBag.ProductGroepProduct)
{
if (pgp != null)
{
if (pgp.Product != null)
{
<option value="#pgp.Id">#pgp.Product.Naam</option>
}
}
}
</select>
}
</div>
You are using a Html Form.
This causes a refresh by default.
Use an ajax form or don't use forms at all and just call an action but don't return an action result.
Create a controller similar to:
public void Action(String paramater)
{
...
}
When you call it from the view it will execute the code on the server side without causing any effects on the client.
As Requested:
Added Non refresh Ajax form example:
$.ajax({
type: "POST",
url: "URL",
data: dataString,
success: function() {
...
};
});
return false;
The return false prevents a refresh.
Follow this guide for a full tutorial.
Maybe you should use Ajax calls ... and choose the div you wish to refresh : here is a short example :
AjaxOptions ajaxOptions = new AjaxOptions
{
HttpMethod = "Post",
UpdateTargetId = "Mydiv",
OnSuccess = "aJqueryFunction"
};
And in your ajax call :
<div id="Mydiv">
#using (Ajax.BeginForm("text", "Action",(optional)"Cotroller", ajaxOptions))
{}
</div>