1

名前を一覧表示する MVC アプリケーションがあります。名前は、エンティティ フレームワーク データベースにあります。タイマーはリストの最初の名前の横にあり、タイマーが終了すると、その名前はリストから削除され、次のレコードのタイマーが再び開始されます (これは、名前がなくなるまで続きます)。

リストに名前を追加する機能もあります。現在、ユーザーが作成リンクをクリックしてリストに名前を追加すると、名前は追加されますが、カウントダウン中の現在のタイマーが再起動します。タイマーを更新せずに名前を追加する必要があります。それは可能ですか??

意見：

@model IEnumerable<RangeTimer.Models.UserName>

@{
    ViewBag.Title = "ABC";
}
<div class="jumbotron">

<p>
        @Html.ActionLink("Add Name to list for range time", "Create")
    </p>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FullName)
        </th>
        <th>
            Time Remaining
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td id="FullName">
                @Html.DisplayFor(modelItem => item.FullName)
            </td>
            <td>
                <span id="timer"></span>
            </td>
        </tr>
    }

</table>

</div>
<br/>
<script language="javascript" type="text/javascript">

$(document).ready(function () {
    startTimer();
    function startTimer() {           
        $('#timer').countdown({
            layout: '{mnn} : {snn}', timeSeparator: ':', until: 15, onTick: TimerColorChange, onExpiry: restartTimer

        });            
    }

    function restartTimer() {          
        $('#timer').countdown('destroy');

        var currentName = $('#FullName').Text;

        //we delete the table's Info
        var deleteRecord = $('#FullName').parent().remove();

        // deleteRecord.deleteRow(); //commented out since this also removes my timer

        var action = '@Url.Action("DeleteName","Controller")';
        $.get(action + "?name=" + currentName).done
            (function (result) {
                if (result) {
                    //  your user is deleted
                }
            })
        startTimer();
    }

    function TimerColorChange(periods) {
        var seconds = $.countdown.periodsToSeconds(periods);
        if (seconds <= 3) {
            $(this).css("color", "red");
        } else {
            $(this).css("color", "black");
        }
    }
});


</script>

コントローラ

  // GET: UserNames
    public ActionResult Index()
    {
        return View(db.UserNames.ToList());
    }

    // GET: UserNames/Details/5
    public ActionResult Details(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        UserName userName = db.UserNames.Find(id);
        if (userName == null)
        {
            return HttpNotFound();
        }
        return View(userName);
    }

    // GET: UserNames/Create
    public ActionResult Create()
    {
        return View();
    }

    // POST: UserNames/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,FullName")] UserName userName)
    {
        if (ModelState.IsValid)
        {
            db.UserNames.Add(userName);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(userName);
    }
4

2 に答える 2

1

時間パラメータを addname アクションに送信し、リダイレクト パラメータを追加する必要がある場合。そしてviewbag.timeを使用するより。

于 2016-03-04T19:42:48.990 に答える
0

はい、可能です！Ajax と Javascript/jQuery の魔法により、ajax を介して名前を追加するときにコントローラーを呼び出して名前を送信し、追加された名前を返し、Javascript または jQuery を使用してページに追加することができます。残念ながら、これは少し複雑なため、現時点では説明できません。ただし、これらのリンクのいくつかを試してください。

https://msdn.microsoft.com/en-us/library/dd381533(v=vs.100).aspx

asp.net mvcでコントローラーへの単純なAjax呼び出しを行う

幸運を！

編集:これは、jQuery/ajax を使用した JavaScript 関数の小さなサンプルです。

function AddName(name) {
    $.ajax({
        url: action, // Make it whatever your controller is
        data: { UserName: name }, // or whatever object you need
        type: "POST",
        dataType: "html",
        success: function (result, status, blah) {

            if (result) {
                AppendRow(result, target); // Create function to add to your name list
            }
        },
        error: function (result) {
            AjaxFailed(result, result.status, result.error);
        }
    });
}
于 2016-03-04T19:35:18.240 に答える