Reset textbox on view and partial view.[Answered] RSS

1 reply

Last post Mar 24, 2020 06:16 AM by Rena Ni

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

bootzilla

Member

194 Points

1137 Posts

Reset textbox on view and partial view.

Mar 23, 2020 08:22 PM|bootzilla|LINK

I'm trying to reset two textboxes in a partial when I click 'Add and Create Another' button and can't get them to reset.

View

<div class="row">
    <div class="col-md-7 order-md-8">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-info">@ViewData["Title"]</h2>
                <hr />
                <div class="row">
                    <div class="col-md-12">
                        <form id="form-create-link"
                              method="post"
                              enctype="multipart/form-data"
                              asp-controller="Link"
                              asp-action="CreateLink">
                            <partial name="_ClientStatusMessage" />
                            <div id="add-link">
                                <partial name="_AddLink" model="@Model" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Partial View (this is where textboxes are)

<div class="form-group col-md-8">
    <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-summary"></div>
</div>

<input id="link-id" asp-for="@Model.LinkId" type="hidden" />
<a name="link"></a>
<partial name="_StatusMessage" model="@statusMessage" />
@*<input type="hidden" asp-for="LinkId" />*@
<div class="form-group col-md-12 col-lg-12">
    <div class="row">
        <div class="form-group col-md-3">
            <a class="btn btn-forum"
               asp-area="Admin"
               asp-controller="Link"
               asp-action="Index">
                <i class="fa fa-arrow-circle-left fa-lg fa-fw"></i>
                Back to Links
            </a>
        </div>
    </div>
</div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Display Order</label>
    <div>
        <input id="displayOrder" asp-for="Order" name="displayorder" class="form-control" />
    </div>
</div>

<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label" asp-for="CategoryId"></label>
    <div>
        <select asp-for="CategoryId"
                asp-items="Model.AvailableCategories" class="form-control"></select>
    </div>
</div>
<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="link-title" asp-for="Title"  class="form-control" />
</div>
<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">URL</label>
    <input id="link-url" asp-for="URL"  class="form-control" placeholder="https://example.com" />
</div>
<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-12">
    <label class="control-label">Description</label>
    <textarea class="rtextLinkDescription" name="Description" id="Description" row="1" cols="60"
              data-val-maxlength-max="200" asp-for="Description"
              data-val-maxlength="Max length for Description is 200"></textarea>
</div>
<div class="form-group col-md-12">
    <a href="#link"
       id="link-save-and-add-another"
       type="button"
       class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Create Another</a>
    <a id="link-submit"
       class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Return to Links</a>
    <a id="link-cancel"
       class="cancel btn btn-forum col-sm-12 col-lg-3">Return to Links</a>
</div>

js file:

$(document).ready(function ($) {
    $('.rtextLinkDescription').richText();
});


$(document).on("click",
    '#link-save-and-add-another',
    function (e) {
        blockUI();
        var post_url = $("#form-create-link").attr("action"); //get form action url
        var request_method = $("#form-create-link").attr("method"); //get form GET/POST method
        var form_data = new FormData($("#form-create-link")[0]);
        $("#link-is-create-only").val(false);
        $.ajax({
            url: post_url,
            type: request_method,
            data: form_data,
            processData: false,
            contentType: false,
            async: true
        }).done(function (objOperations) {
            $("#add-link").html(objOperations);
            if ($("#validation-error")[0].textContent.trim() === "") {
                $('#form-create-link').reset("reset");
                $('.rtextLinkDescription').richText();
                $('#link-is-create-only').click(function () {
                    $(".rtextLinkDescription").val('').trigger("change");;
                });
            }
            $.unblockUI();
        });
    });

jQuery.fn.reset = function () {
    $("#CategoryId").prop('selectedIndex', 0);
    $("#link-title").val("");
    $("#link-url").val("");
    $(".rtextLinkDescription").val('');
    $("#displayOrder").val(0);
}

Rena Ni

Contributor

2690 Points

874 Posts

Re: Reset textbox on view and partial view.

Mar 24, 2020 06:16 AM|Rena Ni|LINK

Hi bootzilla,

Could you please share more details which could reproduce your issue?

I comment some code that you does not provide entirely,and here is a working demo:

Model:

public class TestModel
{
    public int LinkId { get; set; }
    public string Order { get; set; }
    public int CategoryId { get; set; }
    public string Title { get; set; }
    public string URL { get; set; }
    public string Description { get; set; }
    public List<SelectListItem> AvailableCategories { get; set; }
}

View:

@{
    ViewData["Title"] = "Privacy Policy";
}
@model TestModel
<div class="row">
    <div class="col-md-7 order-md-8">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-info">@ViewData["Title"]</h2>
                <hr />
                <div class="row">
                    <div class="col-md-12">
                        <form id="form-create-link"
                              method="post"
                              enctype="multipart/form-data"
                              asp-controller="Home"
                              asp-action="CreateLink">
                            @*<partial name="_ClientStatusMessage" />*@
                            <div id="add-link">
                                <partial name="_AddLink" model="@Model" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts
{
    <script>    
        $(document).on("click",
            '#link-save-and-add-another',
            function (e) {
                //blockUI();
                var post_url = $("#form-create-link").attr("action"); //get form action url
                var request_method = $("#form-create-link").attr("method"); //get form GET/POST method
                var form_data = new FormData($("#form-create-link")[0]);
                //$("#link-is-create-only").val(false);
                $.ajax({
                    url: post_url,
                    type: request_method,
                    data: form_data,
                    processData: false,
                    contentType: false,
                    async: true
                }).done(function (objOperations) {
                    $("#add-link").html(objOperations);
                    if ($("#validation-error")[0].textContent.trim() === "") {
                        $('#form-create-link').reset("reset");
                        $('.rtextLinkDescription').richText();
                        //$('#link-is-create-only').click(function () {
                        //    $(".rtextLinkDescription").val('').trigger("change");;
                        //});
                    }
                     //$.unblockUI();
                });
            });

        jQuery.fn.reset = function () {
            $("#CategoryId").prop('selectedIndex', 0);
            $("#link-title").val("");
            $("#link-url").val("");
            //$(".rtextLinkDescription").val('');
            $("#displayOrder").val(0);
        }
    </script>
}

Partial View(_AddLink.cshtml):

@model TestModel
<div class="form-group col-md-8">
    <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-summary"></div>
</div>

<input id="link-id" asp-for="@Model.LinkId" type="hidden" />
<a name="link"></a>
@*<input type="hidden" asp-for="LinkId" />*@
<div class="form-group col-md-12 col-lg-12">
    <div class="row">
        <div class="form-group col-md-3">
            <a class="btn btn-forum"
               asp-area="Admin"
               asp-controller="Link"
               asp-action="Index">
                <i class="fa fa-arrow-circle-left fa-lg fa-fw"></i>
                Back to Links
            </a>
        </div>
    </div>
</div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Display Order</label>
    <div>
        <input id="displayOrder" asp-for="Order" name="displayorder" class="form-control" />
    </div>
</div>

<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label" asp-for="CategoryId"></label>
    <div>
        <select asp-for="CategoryId"
                asp-items="Model.AvailableCategories" class="form-control"></select>
    </div>
</div>
<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="link-title" asp-for="Title" class="form-control" />
</div>
<div class="verticalspace"></div>
<div class="verticalspace"></div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">URL</label>
    <input id="link-url" asp-for="URL" class="form-control" placeholder="https://example.com" />
</div>
<div class="verticalspace"></div>
<div class="verticalspace"></div>

<div class="form-group col-md-12">
    <a href="#link"
       id="link-save-and-add-another"
       type="button"
       class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Create Another</a>
    <a id="link-submit"
       class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Return to Links</a>
    <a id="link-cancel"
       class="cancel btn btn-forum col-sm-12 col-lg-3">Return to Links</a>
</div>

Controller:

[HttpPost]
public IActionResult CreateLink(TestModel test)
{
    //do your stuff...
    test.AvailableCategories = new List<SelectListItem>
    {
        new SelectListItem{Text = "Value1", Value = "1"},
        new SelectListItem{Text = "Value2", Value = "2"},
        new SelectListItem{Text = "Value3", Value = "3"},
        new SelectListItem{Text = "Value4", Value = "4"}
    };
    return PartialView("_AddLink",test);
}
public IActionResult Privacy()
{
    var model = new TestModel()
    {
        AvailableCategories = new List<SelectListItem>
        {
            new SelectListItem{Text = "Value1", Value = "1"},
            new SelectListItem{Text = "Value2", Value = "2"},
            new SelectListItem{Text = "Value3", Value = "3"},
            new SelectListItem{Text = "Value4", Value = "4"}
        }
    };
    return View(model);
}

Result:

Best Regards,

Rena

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›