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>
Related
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.
HTML Form sends POST request more than one. I am using jquery.unobtrusive-ajax.js for async connection.
When I submit the form request has been sent to server two times. These two connections' details are listed in the Browser's Network -> XHR tab.
Thank you for your suggestions and helps.
My HTML form and my JS files as follows:
JS
<script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script>
<script src="/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script>
HTML Form
#using (Ajax.BeginForm("UpdateDocument", "Document",
new AjaxOptions()
{
HttpMethod = "POST",
OnBegin = "Document.documentUpdateBegin",
OnSuccess = "Document.documentUpdateSuccess",
OnFailure = "Document.documentUpdateFailure"
}))
{
<div class="form-body">
<input type="hidden" name="ID" value="#Model.DocumentItem.ID" />
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text"
class="form-control"
name="Title" id="title"
autocomplete="off"
maxlength="250"
value="#Model.DocumentItem.Title"
required="required" />
<label for="title_value">Title</label>
<span class="help-block">Max 250 characters</span>
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<label class="control-label col-md-2"
style="padding-left: 0px; margin: 5px 0px; color: #888;">
Durum</label>
<div class="col-md-2">
#Html.CheckBox("IsActive", Model.DocumentItem.IsActive,
new
{
#class = "make-switch",
id = "is_active",
data_on_text = " Aktif ",
data_off_text = " Pasif "
})
</div>
</div>
</div>
<div class="form-actions noborder margin-top-20">
<div class="col-md-2">
<button type="submit" class="btn btn-block blue">UPDATE</button>
</div>
</div>
}
I found the solution.
There are two javascript jquery.unobtrusive-ajax.js file declaration in JS section.
After I removed the second <script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script> problem is solved.
I( have an MVC 5 application that is also using angularjs and boot strap. When the page loads the modal doesnt launch and i get the following err in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.8/$injector/modulerr?p0=myApp&p1=Error%3A%2….c%20(http%3A%2F%2Flocalhost%3A60248%2FScripts%2Fangular.min.js%3A17%3A431)
Here is my html:
Layout:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temujin #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.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("Temujin", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Temujin</p>
</footer>
</div>
</body>
</html>
Directive template:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
cshtml:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
angularjs:
(function () {
var temujin = angular.module('temujin', []);
temujin.controller('AuthModalController', ['$scope',function ($scope) {
$scope.temujin.user = {};
console.log("AuthModalController ran");
$scope.$(".modal").modal({ message: 'HEll0 World' });
}]);
temujin.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
temujin.controller('AuthController',['$scope',function ($scope) {
$scope.user = {};
console.log("AuthController ran");
$scope.auth = function () {
console.log("user " + this.user);
};
}]);
})();
MVC 5 controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace temujin.Controllers
{
public class TemujinController : Controller
{
//
// GET: /Temujin/
public ActionResult Index()
{
return View();
}
}
}
You are attempting to use the module myApp in your page here:
<html ng-app ="myApp">
But your actual module is named temujin
You just need to change your ng-app directive to point to the right module name.
<html ng-app ="temujin">
When clicking the submit button the auth function isn't being called, I haven't been able to figure out why.
html for the template for all pages:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.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("myApp", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - myApp</p>
</footer>
</div>
</body>
</html>
html for this pages view:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
here is the html for the custom directive:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Here is the JS:
(function () {
var MyApp = angular.module('MyApp', []);
MyApp.controller('AuthModalController', function () {
MyApp.user = {};
console.log("AuthModalController ran");
$(".modal").modal({});
});
MyApp.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
MyApp.controller('AuthController',function () {
this.user = {};
console.log("AuthController ran");
this.auth = function () {
console.log("user " + this.user);
};
});
})();
MVC 5 Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyApp.Controllers
{
public class MyAppController : Controller
{
//
// GET: /MyApp/
public ActionResult Index()
{
return View();
}
}
}
Edit: I'm adding on here that I couldn't get the code linked below to run except by adding the ng-app="app-name-from-module" directive alongside the controller declaration on the form object, which is not in the linked angular-js documentation!
Reading just the documentation I noticed quite a few issues,
1) You're declaring "myApp" and using "MyApp" unless thats an obfuscation error.
2) I think your controller is missing a few things per the documentation (esp $scope variable, https://docs.angularjs.org/guide/controller)
2a) You're not attaching the auth function to the $scope
3) The .controller seems to take a string and an array as an argument, not a generic function.
Per: https://docs.angularjs.org/api/ng/directive/ngSubmit
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form ng-app="submitExample" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
I spent > 8 hours today just to make my slide works but unfortunately it didn't work.It only display the 4 static images.. Why it doesn't work? Can anybody tell me? Here is my code.
asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function() {
$("#slides").slides({
preload: true
});
});
</script>
.........................
<div id="slides">
<div class="slides_container">
<div> <img src= "folder/6.jpg" /></div>
<div><img src="folder/7.jpg" /></div>
<div><img src="folder/extreme.jpg" /></div>
<div><img src="folder/alza.jpg" /></div>
</div>
</div>
Someone who knows my problem, please help me. Appreciate that. Have a nice Tuesday :)
I assume you make use of SlideJS? If I am correct - have a look at this demo code - which worked for me
<style type="text/css" media="screen">
.slides_container
{
width: 570px;
height: 270px;
}
.slides_container div
{
width: 570px;
height: 270px;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- downloaded from SlideJS and put it in a js folder -->
<script src="js/slides.min.jquery.js"></script>
<script>
$(function () {
$("#slides").slides({
preload: true
});
});
</script>
<div id="slides">
<div class="slides_container">
<div>
<img src="pic/1.jpg" /></div>
<div>
<img src="pic/2.jpg" /></div>
<div>
<img src="pic/3.jpg" /></div>
<div>
<img src="pic/4.jpg" /></div>
</div>
</div>