My record is inserted on html page with page refresh. I want it to insert on current page on CREATE button click

See more:

MVC

Knockout.js

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">&nbsp;</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; }
    }
}