我的记录插入到页面刷新的html页面上。我希望它在CREATE按钮单击的当前页面上插入 [英] My record is inserted on html page with page refresh. I want it to insert on current page on CREATE button click
问题描述
Jquery脚本
函数AllDefaultScheduleInfo(){
// Break细节的功能
var self = this;
//声明将与UI绑定的observable
self.Id = ko。 observable();
self.BreakStartTime = ko.observable();
self.BreakEndTime = ko.observable();
self.BreakReason = ko.observable();
var Break = {
Id:self.Id,
BreakStartTime:self.BreakStartTime,
BreakEndTime:self.BreakEndTime,
BreakReason:self.BreakReason
} ;
self.Break = ko.observable();
self.Breaks = ko.observableArray([]);
//初始化视图模型
$ .ajax({
url:'@ Url.Action(GetAllBreaks,SchedulerSetting )',
cache:false,
类型:'GET',
contentType:'application / json; charset = utf-8',
数据:{},
成功:函数(数据){
self.Breaks(data);
}
});
//添加新物品
self .create = function(){
$(#dialog-edit)。dialog('open');
$(。ui-dialog-titlebar-关闭)。hide();
返回false;
}
$(#dialog-编辑)。对话框({
autoOpen:false,
可调整大小:false,
宽度:400,
show:{effect:'drop',direction:up},
modal:true,
draggable:true,
open :function(event,ui){
$(this).load('../ SchedulerSetting / AddBreak',function(BreakDetailData){
self.Breaks.push(BreakDetailData);
self.BreakStartTime( );
self.BreakEndTime();
self.BreakReason();
})
}
});
}
RAZOR VEIW
Jquery script
function AllDefaultScheduleInfo() {
// functionality of Break detail
var self = this;
//Declare observable which will be bind with UI
self.Id = ko.observable("");
self.BreakStartTime = ko.observable("");
self.BreakEndTime = ko.observable("");
self.BreakReason = ko.observable("");
var Break = {
Id: self.Id,
BreakStartTime: self.BreakStartTime,
BreakEndTime: self.BreakEndTime,
BreakReason: self.BreakReason
};
self.Break = ko.observable();
self.Breaks = ko.observableArray([]);
//Initialize the view-model
$.ajax({
url: '@Url.Action("GetAllBreaks", "SchedulerSetting")',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.Breaks(data);
}
});
//Add New Item
self.create = function () {
$("#dialog-edit").dialog('open');
$(".ui-dialog-titlebar-close").hide();
return false;
}
$("#dialog-edit").dialog({
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load('../SchedulerSetting/AddBreak', function (BreakDetailData) {
self.Breaks.push(BreakDetailData);
self.BreakStartTime("");
self.BreakEndTime("");
self.BreakReason("");
})
}
});
}
RAZOR VEIW
</div>
<div id="dialog-edit">
</div>
<div>
<button data-bind="click:create">Add Breaks</button>
</div>
<table id=" BreakRecord" data-bind="visible: Breaks().length > 0">
<tr>
<th> Id </th>
<th> Start Time </th>
<th> End Time </th>
<th> Reason </th>
<th></th>
</tr>
<tbody data-bind="foreach:Breaks">
<tr>
<td data-bind="text:$data.Id"></td>
<td data-bind="text:$data.BreakStartTime "></td>
<td data-bind="text:$data.BreakEndTime "></td>
<td data-bind="text:$data.BreakReason"></td>
<td>
<button data-bind="click:$root.edit">Edit</button>
<button data-bind="click:$root.delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<br />
<div style="border-top: solid 2px #282828; width: 430px; height: 10px"> </div>
<div data-bind="if: Break()">
<div>
<h2>Update Break</h2>
</div>
<div>
<label for="BreakId" data-bind="visible: false">ID</label>
<label data-bind="text: Break().Id, visible: false"></label>
</div>
<div>
<label for="BreakStartTime">Break Start Time</label>
<input data-bind="value: Break().BreakStartTime" type="time" title="BreakStartTime" />
</div>
<div>
<label for="BreakEndTime">Break End Time</label>
<input data-bind="value: Break().BreakEndTime" type="time" title="BreakEndTime" />
</div>
<div>
<label for="BreakReason">Break Reason</label>
<input data-bind="value: Break().Reason" type="text" title="BreakReason" />
</div>
<br />
<div>
<button data-bind="click: $root.update">Update</button>
<button data-bind="click: $root.cancel">Cancel</button>
</div>
</div>
控制器代码
Controller code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Scheduler.Business.Services;
using Scheduler.Data.ViewModel.ScheduleViewModel;
namespace Scheduler.Web.Controllers
{
public class SchedulerSettingController : Controller
{
static readonly BreakServices repository = new BreakServices();
//
// GET: /SchedulerSetting/
public ActionResult Schedule()
{
return View();
}
public ActionResult AddBreak()
{
return View();
}
public JsonResult GetAllBreaks()
{
return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult AddBreak(BreakViewModel BreakData)
{
BreakData = repository.Add(BreakData);
return Json(BreakData);
}
}
}
Since i have used a view for dialog box so putting that view too
@model Scheduler.Data.ViewModel.ScheduleViewModel.BreakViewModel
@{
ViewBag.Title = "Break";
}
<h2>Break</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Add Break</legend>
<div class="editor-label">
@Html.LabelFor(model => model.BreakStartTime)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.BreakStartTime, new { type = "time" })
@Html.ValidationMessageFor(model => model.BreakStartTime)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.BreakEndTime)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.BreakEndTime, new { type = "time" })
@Html.ValidationMessageFor(model => model.BreakEndTime)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.BreakReason)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.BreakReason)
@Html.ValidationMessageFor(model => model.BreakReason)
</div>
<p>
<input type="button" value="Create" onclick="ReturnBreakInfo();" />
<input type="button" value="Cancel" onclick="CloseDialog();" />
</p>
</fieldset>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
function ReturnBreakInfo() {
var BreakData = {
BreakStartTime : $('#BreakStartTime').val(),
BreakEndTime : $('#BreakEndTime').val(),
BreakReason : $('#BreakReason').val(),
};
$.ajax({
type: 'POST',
url: '../SchedulerSetting/AddBreak',
data: BreakData,
success: function (BreakDetailData) {
CloseDialog();
}
});
}
function CloseDialog() {
$("#dialog-edit").dialog().dialog('close');
}
</script>
}
Model
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Scheduler.Data.ViewModel.ScheduleViewModel
{
public class BreakViewModel
{
public int Id { get; set; }
[Required]
[Display(Name = "Break Start Time")]
public string BreakStartTime { get; set; }
[Required]
[Display(Name = "Break End Time")]
public string BreakEndTime { get; set; }
[Required]
[Display(Name = "Break Reason")]
public string BreakReason { get; set; }
}
}
推荐答案
.ajax({
url:' @ Url.Action(GetAllBreaks,SchedulerSetting)',
cache:false,
类型:'GET',
contentType :'application / json; charset = utf-8',
数据:{},
成功:函数(数据){
self .Breaks(数据);
}
});
//添加新项
self.create = function(){
.ajax({
url: '@Url.Action("GetAllBreaks", "SchedulerSetting")',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.Breaks(data);
}
});
//Add New Item
self.create = function () {
(#dialog-edit)。dialog('open');
("#dialog-edit").dialog('open');
(。ui-dialog-titlebar-close)。hide();
返回false;
}
(".ui-dialog-titlebar-close").hide();
return false;
}
这篇关于我的记录插入到页面刷新的html页面上。我希望它在CREATE按钮单击的当前页面上插入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!