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

185 Points

1090 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

Participant

1910 Points

642 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›