$(document).ready(function () {
$('#radioExtranet').on('click', function () { showProjectInformation() });
$('#radioCorp').on('click', function () { hideProjectInformation() });
$('.add').on("click", function () { addServerIP(this) });
$("form").submit(function () {
//if ($("#wo").val() != "")//验证
if (true)//验证ip1~3不为空，ComputerName不为空，Friendly name不为空，pitid&sraid 不为空
{
if ($("#radioExtranet").val() == "Extranet") {
$.ajax({
url: "/ScanNow/RadioBtnType",
type: "Post",
//dataType: "json",
data: { TypeName: $("#radioExtranet").val()},
//success: function (data) {
// if (data.wuyang == "1") {
// alert(data.wuyang)
// alert(data.yangwu);
// //location.reload();
// } else {
// alert(data.yangwu);
// }
//}
})
}
else {
}
return true;
}
else {
alert("Some fields are empty! Please fill in the item.");
return false;
}
});
}
);
function hideProjectInformation() {
$("#tabProjectInformation").hide();
$("#radioCorp").attr('value', 'Corp');
$("#radioExtranet").attr('value', '1');
}
function showProjectInformation() {
$("#tabProjectInformation").show();
$("#radioCorp").attr('value', '0');
$("#radioExtranet").attr('value', 'Extranet');
}
function addServerIP(el) {
var account = $('#iptable').find("tr").length;
var trServerIP = $("#ServerIP1").clone();
trServerIP.attr("id", "ServerIP" + account);
trServerIP.attr("class", "addServerIP");
trServerIP.find(".labServerIP").remove();
trServerIP.find("img").attr("src", "/Content/Images/Add.png");
trServerIP.find("img").attr("title", "add");
trServerIP.find("img").attr("alt", "add");
trServerIP.find("img").attr("class", "add");
$("#ServerIP"+(account-1)).after(trServerIP);
$("#ServerIP" + (account - 1)).find("img").attr("src", "/Content/Images/Remove.png");
$("#ServerIP" + (account - 1)).find(".add").attr("title", "remove");
$("#ServerIP" + (account - 1)).find(".add").attr("alt", "remove");
$("#ServerIP" + (account - 1)).find(".add").attr("class", "remove");
$('.add').off("click");
$('.add').on("click", function () { addServerIP(this) });
$('.remove').off("click");
$('.remove').on("click", function () { removeServerIP(this) });
}
function removeServerIP(el) {
$(el).parent().parent().parent("tr").remove();
$('.remove').off("click");
$('.remove').on("click", function () { removeServerIP(this) });
if ($('#iptable').find("tr").length == 2)
{
$("#iptable").find("tr:eq(1)").attr("id", "ServerIP1");
$('#ServerIP1').find("td").first().append("<label class=\"labServerIP\"><strong>Server IP</strong></label>");
}
$('.add').off("click");
$('.add').on("click", function () { addServerIP(this) });
}
//
function removePorjectInformation(el) {
var tabProjectInformationTemplate = $('#tabProjectInformationTemplate').clone();
if ($('#tabProjectInformation').length == 0)
{
tabProjectInformationTemplate.removeAttr('style');
tabProjectInformationTemplate.attr('id','tabProjectInformation');
}
if (el == 'radionBtnExtranet') {
$('#radionBtnCorp').attr('checked', false);
$('#tabRequestInformation').after(tabProjectInformationTemplate);
}
else {
$('#radionBtnExtranet').attr('checked', false);
$('#tabProjectInformation').remove();
}
}
jQuery添加删除元素。。。
前台代码：
@model Q6.Models.ScanRequestModel
@{
ViewBag.Title = "Qualys Self-Serve";
} @section HeaderContent
{
@Styles.Render("~/Content/tip-yellow.css")
@Scripts.Render("~/Scripts/jquery.poshytip.min.js")
@Scripts.Render("~/Scripts/jquery-Q6-scannow.js");
<script type="text/javascript">
$(document).ready(function () { CreatePoshyTip('#Ip1, #Ip5, #Title, #NotificationList, #PitId, #SraId, #SdlTrackId, #EsdlId, #MsAppId, #RequestorAlias'); });
</script>
<!--[Yang] Start-->
<script type="text/ecmascript">
function addRowToTable() {
var tbl = document.getElementById('iptable');
var lastRow = tbl.rows.length; var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// ServerIP cell
var cellLeft = row.insertCell();
var textNode = document.createTextNode('');
cellLeft.appendChild(textNode);
// IP1 cell //class = "wide", maxlength = "3", style = "width:28px", title = "Enter IP xxx.xxx.xxx.xxx"
var cellIP1 = row.insertCell();
var el = document.createElement('input');
el.type = 'text';
el.name = 'IP1' + iteration;
el.id = 'IP1' + iteration;
el.className = 'wide';
el.style.width = "28px";
el.title = 'Enter IP xxx.xxx.xxx.xxx';
cellIP1.appendChild(el);
// IP2 cell
var cellIP2 = row.insertCell();
var sel2 = document.createElement('lable');
sel2.name = 'sel2' + iteration;
sel2.textContent = '. ';
cellIP2.appendChild(sel2);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'IP2' + iteration;
el2.id = 'IP2' + iteration;
el2.className = 'wide';
el2.style.width = "28px";
cellIP2.insertBefore(el2, sel2.nextSibling);
//IP3 cell
var cellIP3 = row.insertCell();
var sel3 = document.createElement('lable');
sel3.name = 'sel3' + iteration;
sel3.textContent = '. ';
cellIP3.appendChild(sel3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'IP3' + iteration;
el3.id = 'IP3' + iteration;
el3.className = 'wide';
el3.style.width = "28px";
cellIP3.insertBefore(el3, sel3.nextSibling);
//IP4 cell
var cellIP4 = row.insertCell();
var sel4 = document.createElement('lable');
sel4.name = 'sel4' + iteration;
sel4.textContent = '. ';
cellIP4.appendChild(sel4);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'IP4' + iteration;
el4.id = 'IP4' + iteration;
el4.className = 'wide';
el4.style.width = "28px";
cellIP4.insertBefore(el4, sel4.nextSibling);
//IP5 cell
var cellIP5 = row.insertCell();
var sel5 = document.createElement('lable');
sel5.name = 'sel5' + iteration;
sel5.textContent = '- ';
cellIP5.appendChild(sel5);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'IP5' + iteration;
el5.id = 'IP5' + iteration;
el5.className = 'wide';
el5.style.width = "28px";
el5.title = 'Enter ending range';
cellIP5.insertBefore(el5, sel5.nextSibling); } </script>
<!--End-->
}
<h2>Create a New Scan Request</h2>
<p>@Html.ValidationMessageFor(m => m.CreatedDate)</p>
@if (!string.IsNullOrWhiteSpace(ViewBag.AddSuccess))
{
<p class="error" style="color:Red">@ViewBag.AddSuccess</p>
} @using (Html.BeginForm("Index", "ScanNow", FormMethod.Post))
{
<div id="mainform">
<h3>Scan Type</h3>
<table id="scanTypetable" style="border-collapse:collapse; border: 0px solid black;">
<tr>
<td>
<strong><label>Select Scan Type: </label></strong>
</td>
</tr>
<tr>
<td>
<input type="radio" name="radioScanType" id="radioExtranet" checked="checked" value="Extranet"/>Extranet Scan
<input type="radio" name="radioScanType" id="radioCorp" value="" />Corp Scan
@*@Html.RadioButtonFor(model => model.TypeState, , new {@id="radio1",@name="rdolstState" })Use
@Html.RadioButtonFor(model => model.TypeState, , new {@id="radio2",@name="rdolstState" })Unuse*@
</td>
</tr>
</table>
<h3>Server information:</h3>
<table id="iptable" class="iptable" style="border-collapse:collapse; border: 0px solid black;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="" align="center" style="font-size:10px"><strong>(range)</strong></td>
@*[Yang] add a <td> element*@
<td></td>
</tr>
<tr id="ServerIP1" class="ip">
<td ><label class="labServerIP"><strong>Server IP</strong></label></td>
<td>
@Html.TextBoxFor(m => m.Ip1, new { @class = "wide", @maxlength = "", @style = "width:28px", @title = "Enter IP xxx.xxx.xxx.xxx" })
</td>
<td>
<label>.</label>
@Html.TextBoxFor(m => m.Ip2, new { @class = "wide", @maxlength = "", @style = "width:28px" })
</td>
<td>
<label>.</label>
@Html.TextBoxFor(m => m.Ip3, new { @class = "wide", @maxlength = "", @style = "width:28px" })
</td> <td>
<label>.</label>
@Html.TextBoxFor(m => m.Ip4, new { @class = "wide", @maxlength = "", @style = "width:28px" })
</td>
<td> <label>- </label>
@Html.TextBoxFor(m => m.Ip5, new { @class = "wide", @maxlength = "", @style = "width:28px", @title = "Enter ending range" })
</td>
@*[Yang] add a <td> element*@
<td>
<a href="#"><img src="~/Content/Images/Add.png" class="add" alt="add" style="vertical-align:top;margin-top:0px;width:22px;height:22px;" title="add" /></a>
</td> @if (@Html.ValidationMessageFor(m => m.Ip1).ToString() != "<span class=\"field-validation-valid\" data-valmsg-for=\"Ip1\" data-valmsg-replace=\"true\"></span>")
{
<td>@Html.ValidationMessageFor(m => m.Ip1)</td>
}
</tr> @if (@Html.ValidationMessageFor(m => m.Ip2).ToString() != "<span class=\"field-validation-valid\" data-valmsg-for=\"Ip2\" data-valmsg-replace=\"true\"></span>")
{
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>@Html.ValidationMessageFor(m => m.Ip2)</td>
</tr>
}
@if (@Html.ValidationMessageFor(m => m.Ip3).ToString() != "<span class=\"field-validation-valid\" data-valmsg-for=\"Ip3\" data-valmsg-replace=\"true\"></span>")
{
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>@Html.ValidationMessageFor(m => m.Ip3)</td>
</tr>
}
@if (@Html.ValidationMessageFor(m => m.Ip4).ToString() != "<span class=\"field-validation-valid\" data-valmsg-for=\"Ip4\" data-valmsg-replace=\"true\"></span>")
{
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>@Html.ValidationMessageFor(m => m.Ip4)</td>
</tr>
}
@if (@Html.ValidationMessageFor(m => m.Ip5).ToString() != "<span class=\"field-validation-valid\" data-valmsg-for=\"Ip5\" data-valmsg-replace=\"true\"></span>")
{
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>@Html.ValidationMessageFor(m => m.Ip5)</td>
</tr>
}
</table>
<!--[Yang] Start-->
@*<table>
<tr>
<td><strong>@Html.LabelFor(m => m.ComputerName)</strong></td>
<td>@Html.TextBoxFor(m => m.ComputerName, new { @class = "wide", @title = "Enter a Computer name for the Scan", @maxlength = "" })
@Html.ValidationMessageFor(m => m.ComputerName)
</td>
<td>
<input type="image" src="@Url.Content("~/Content/Images/Remove.png")" alt="remove" style="vertical-align:top;margin-top:0px;width:22px;height:22px;" title="remove" />
</td>
<td>
@Html.Hidden("hiddenTest", "hiddenTest")
<input type="image" src="@Url.Content("~/Content/Images/CheckRight.png")" alt="valid computer name" style="vertical-align:top;margin-top:0px;width:22px;height:22px;" title="valid computer name" />
</td>
</tr>
</table>*@
<!--End-->
<table>
<tr>
<td><strong>@Html.LabelFor(m => m.Title)</strong></td>
<td>@Html.TextBoxFor(m => m.Title, new { @class = "wide", @title = "Enter a friendly name for the scan. No special characters are allowed in this field.", @maxlength = "" })
@Html.ValidationMessageFor(m => m.Title)
</td>
</tr>
</table>
</div>
<div id="tabRequestInformation">
<h3>Request information:</h3>
<table> <tr>
<td>
<strong>@Html.LabelFor(m => m.RequestorAlias)</strong>
</td>
<td>
@Html.TextBoxFor(m => m.RequestorAlias, new { @class = "wide", @disabled = "disabled" })
@Html.ValidationMessageFor(m => m.RequestorAlias)
</td>
</tr> <tr>
<td>
<strong>@Html.LabelFor(m => m.NotificationList)</strong>
</td>
<td>
@Html.TextBoxFor(m => m.NotificationList, new { @class = "wide", @title = "Enter Alias of people you want to notify about scan completion. Use ; to separate multiple aliases." })
@Html.ValidationMessageFor(m => m.NotificationList)
</td>
</tr> </table>
</div> <div id="tabProjectInformation">
<h3>Project Information:</h3>
<table>
<tr>
<td>
<a target="_blank" href="http://eapm/">Planning IT ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.PitId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://eapm" })
@Html.ValidationMessageFor(m => m.PitId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://engageisrm/">SRA ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.SraId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://engageisrm. " })
@Html.ValidationMessageFor(m => m.SraId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://getsecure/">SDL Track ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.SdlTrackId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created before April 1st, 2013.See http://getsecure for instructions how to obtain." })
@Html.ValidationMessageFor(m => m.SdlTrackId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://getsecure/">eSDL ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.EsdlId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created after April 1st, 2013.See http://getsecure for instructions how to obtain." })
@Html.ValidationMessageFor(m => m.EsdlId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://eapm/">MS Apps ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.MsAppId, new { @class = "wide", @title = "Optional for this request. MSApps has been replaced by Planning IT in 2012. An Extranet sign-off request will be denied if a Planning IT identifier has not been provided. Planning IT supports association with your MSAppsID. Obtain your Planning IT identifier and associate it to your MSAppsID from http://eapm." })
@Html.ValidationMessageFor(m => m.MsAppId)
</td>
</tr>
</table>
</div>
//[Yang] Clone a Project Information
<div id="tabProjectInformationTemplate" style="display: none">
<h3>Project Information:</h3>
<table>
<tr>
<td>
<a target="_blank" href="http://eapm/">Planning IT ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.PitId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://eapm" })
@Html.ValidationMessageFor(m => m.PitId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://engageisrm/">SRA ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.SraId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://engageisrm. " })
@Html.ValidationMessageFor(m => m.SraId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://getsecure/">SDL Track ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.SdlTrackId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created before April 1st, 2013.See http://getsecure for instructions how to obtain." })
@Html.ValidationMessageFor(m => m.SdlTrackId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://getsecure/">eSDL ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.EsdlId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created after April 1st, 2013.See http://getsecure for instructions how to obtain." })
@Html.ValidationMessageFor(m => m.EsdlId)
</td>
</tr> <tr>
<td>
<a target="_blank" href="http://eapm/">MS Apps ID</a>
</td>
<td>
@Html.TextBoxFor(m => m.MsAppId, new { @class = "wide", @title = "Optional for this request. MSApps has been replaced by Planning IT in 2012. An Extranet sign-off request will be denied if a Planning IT identifier has not been provided. Planning IT supports association with your MSAppsID. Obtain your Planning IT identifier and associate it to your MSAppsID from http://eapm." })
@Html.ValidationMessageFor(m => m.MsAppId)
</td>
</tr>
</table>
</div>
//Clone end <h3>Agreement:</h3>
<p>
@Html.CheckBoxFor(m => m.Agreement, new { @class = "left" })
<strong>Read </strong>the @Html.ActionLink("Terms of Agreement", "Agreement", "Home"). By clicking here you attest agreement and compliance with these terms; that you own or have explicit permission of the owner to scan the target(s); that these targets are part of the MSIT extranet; these targets will require, at some point in the near future, either a VIP or SNAT. If your target/host does not meet these requirements, you should not submit the scan request.
<br />
@Html.ValidationMessageFor(m => m.Agreement)
</p> <div class="formright" style="text-align:left"> <input name="submitButton" id="submitButton" type="submit" value="Submit" class="button" />
</div> }
基于MVC的前台。。。