Edit Displayed Text in ASP.NET MVC View Without Submitting Form

Question

In my ASP.NET MVC Edit view, I have an EditorFor (@id="Desc") that contains text, all or most of which is uppercase. I need to provide a way for my user to click a button that will convert and display that text in normal sentence case (only the first letter of each sentence capitalized) without actually submitting the form to the Edit post method (and thereby saving the change before the user has had a chance to review and approve it).

The solutions I've found so far all cause the form to be submitted and that's definitely not what I want to happen. I'm guessing there is a jQuery solution that will just update the display without submitting the form but I'm' not sure what it is or how to implement it.

Any help would be appreciated. Please let me know if I need to provide addition info Thanks!

score 1 · Answer 1 · answered Mar 23 '15 at 23:42

1

You can put your text in div using JS, then just apply text-transform: capitalize.

answered Mar 23 '15 at 23:42

Raed

519
1
6
23

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

It sounds like you need something like this:

Convert string to title case with javascript

If you want to wire this up to a button, you could use something like this:

@Html.TextAreaFor(x => x.Body);
<button id="ConvertBodyCase" type="button">Convert Body</button>

<script type="text/javascript">

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    $(function() {
        $("#ConvertBodyCase").click(function() {
            var $body = $("#Body");
            var text = $body.val();
            $body.val(capitalizeFirstLetter(text));
        });
    });
</script>

edited May 23 '17 at 12:06

Community

1
1

answered Mar 23 '15 at 23:51

Mun

14,098
11
59
83

OK, I tried this. Two problems: Title case capitalizes every word. I only want the first word of the sentence capitalized. Also, clicking the button submits the form which I don't want to happen. I just want the text displayed in the TextArea to change. Thanks. – MeTP Mar 24 '15 at 00:21
@MeTP Amended the answer. The reason the button was submitting the form is because it was missing the 'type' attribute, causing it to act like a submit button by default. The Javascript code has been modified to capitalize the first character of the string. If you want the code to work with multiple sentences and only capitalize the first letter of each one, you'll have to do some work yourself, though this is not something easily achievable with client-side Javascript. – Mun Mar 24 '15 at 02:49

Edit Displayed Text in ASP.NET MVC View Without Submitting Form

2 Answers2